Question

我在悬停时创建一个弹出窗口，但它的闪烁速度如此之快。我试图应用超时，延迟功能，但没有运气。也许我做错了。

$(document).on('mouseout', '.lash-opt', function(){
    $('#hover-popup').css({display: 'none'});
});

$(document).on('mouseover', ' .lash-opt', function() {
    $('#hover-popup').css({display: 'block'});
});

.lash-opt img{
    width:100px;
    height:100px;
    border:2px solid black;
}
#hover-popup{
    display:none;
}
#hover-popup img{
    width:100px;
    height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />
 
 
<span id="style-no-pictures-please" class="lash-opt">
    <img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" />
     <label>3</label>
    </span>
</div>

<div id="hover-popup">
    <img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
</div>

Answer 1

而不是display: none和display: block使用fadeIn()和fadeOut()，您可以使用delay()设置fadeOut之前的延迟时间。

$(document).on('mouseout', '.lash-opt', function() {
  $('#hover-popup').delay(1000).fadeOut(500);
//Set delay time -----------^

//Set transition time--------------------^
});

＆＃13;

$(document).on('mouseout', '.lash-opt', function() {
  $('#hover-popup').delay(1000).fadeOut(500);
});
$(document).on('mouseover', ' .lash-opt', function() {
  $('#hover-popup').fadeIn(500);
});

＆＃13;

.lash-opt img {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

#hover-popup {
  display: none;
}

#hover-popup img {
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />




  <span id="style-no-pictures-please" class="lash-opt"><img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" /> <label>3</label></div>

    </span>



  <div id="hover-popup"><img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
  </div>
</div>

＆＃13;

Answer 2

$(document).on('mouseout', '.lash-opt', function(){
        $('#hover-popup').animation({opacity: 0},300,function(){
        $('#hover-popup').css({'display: 'none'};
    });
    });

    $(document).on('mouseover', ' .lash-opt', function() {
       $('#hover-popup').animation({opacity: 1},300,function(){
       $('#hover-popup').css({'display': 'block'});
    });

    });

.lash-opt img {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

#hover-popup {
  display: none;
}

#hover-popup img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />




  <span id="style-no-pictures-please" class="lash-opt"><img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" /> <label>3</label></div>

    </span>



  <div id="hover-popup"><img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
  </div>
</div>

 
    $('.lash-opt').mouseover(function() {     
      $('#hover-popup').css({'display': 'block'});
      $('#hover-popup').animate({opacity: 1},500,function()
       { });         
    });
    
    $('.lash-opt').mouseout(function() {       
      $('#hover-popup').animate({opacity: 0},500,function()
       {$('#hover-popup').css({'display': 'none'});       
       });         
    });

.lash-opt img{
    width:100px;
    height:100px;
    border:2px solid black;
}
#hover-popup{
    display:none;opacity:0;
}
#hover-popup img{
    width:100px;
    height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />
 
 
<span id="style-no-pictures-please" class="lash-opt">
    <img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" />
     <label>3</label>
    </span>
</div>

<div id="hover-popup">
    <img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
</div>

悬停弹出窗口快速闪烁

2 个答案: