Question

当我将鼠标悬停在div id =“mission”上时，我正试图使所有隐藏的css类的div变为淡化而id =“feat-hover”的div变得完全可见

这是我的代码：

$(function() {           
        $("#mission").hover(function () {             
                $(".to-be-hidden").stop().animate({opacity: 0.5}, "slow");  
        $('#feat-hover').stop().animate({'opacity': '1.0'}, "slow"); 
        },          
        function () {      
                $(".to-be-hidden").stop().animate({opacity: 1.0}, "slow");  
        $('#feat-hover').stop().animate({'opacity': '0'}, "slow");     
        });  
});

这是我的HTML：我替换了文本块，希望它能够淡化。

<div id="featured" class="grid col-940">
<div id="left-landing-container" class="left-cont" style="">

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>
</div>

<div id="mission" class="keep-visible">
<div class="left-div" style="padding: 1px 0px 1px 6px; width: 97%;"">Mission Statement</div>
</div>
</div><!-- end of #left-landing-container -->

当我第一次悬停时，脚本会正确运行，然后它不会再次运行。

请帮忙！

Answer 1

试试这个，它会解决你的问题

$(function() {           
    $("#mission").hover(function () {             
  $(".to-be-hidden").each(function( index ) {

    $(this).stop().animate({opacity: 0.5}, "slow");  
    $('#feat-hover').stop().animate({'opacity': '1.0'}, "slow");
 });},          
    function () {      
           $(".to-be-hidden").each(function( index ) {

    $(this).stop().animate({opacity: 1.0}, "slow");  
    $('#feat-hover').stop().animate({'opacity': '0'}, "slow");
 });  
    });  
 });

JQuery Animate只运行一次

1 个答案: