CODEWITHSUNDEEP
javascripthtmljquerycss
ikiK
ikiK

Reputation: 6532

JQuery hover efect not starting on first hover

I have a menu that I want to animate on hover to slide down an sub menu.

Problem with this is that on first hover menu doesn't slide down, just on second and all after that until page is again initialized. In example code you you can see the behavior, to see the first hover not taking effect just press run again. I have read few articles here and none of it makes sense to me and I can not relate to any of them.

Been trying for hours now so any help or guidance is welcome. Also bonus* sub menu dos not actually slide up, but I can live with that...

$(function () {    
  $('.stranke').hover(function () {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function () {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<div class="w3-dropdown-hover w3-mobile  stranke">
                <button class="w3-button  meni-divider draw" >STRANKE <i class="fa fa-caret-down"></i></button>
                <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
                    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d">UNOS NOVE</a>
                    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d">PRAVNE</a>
                    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d">FIZIČKE</a>
                </div>
            </div>

Upvotes: 0

Views: 61

Answers (1)

Taplar
Taplar

Reputation: 24965

The difference between your initial html and the html after the first slideDown/slideUp is that after the first time, all the elements have a style="display: none" on them. If you initialize the html with that inline style, it works from the get go.

$(function() {
  $('.stranke').hover(function() {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function() {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-dropdown-hover w3-mobile  stranke">
  <button class="w3-button  meni-divider draw">STRANKE <i class="fa fa-caret-down"></i></button>
  <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d" style="display: none">UNOS NOVE</a>
    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d" style="display: none">PRAVNE</a>
    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d" style="display: none">FIZIČKE</a>
  </div>
</div>

Upvotes: 1

Related Questions