0

.to-be-hidden css クラスのすべての div をフェードさせ、id="feat-hover" の div を div id="mission" にカーソルを合わせると完全に表示されるようにしようとしています。

これが私のコードです：

$(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 があります: テキストのブロックを want this to fade に置き換えました。

<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 -->

初めてホバーしたときにスクリプトが正しく実行され、その後は実行されません。

助けてください！

4

1 に答える 1

0

これを試してください、それはあなたの問題を解決します

$(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");
 });  
    });  
 });
于 2013-06-20T19:35:09.423 に答える