1つの関数でmouseenter、mouseleaveを切り替える方法

Question

私はここを見渡して解決策を見いだしましたが、より簡単なコードを書く方法があるかどうかは疑問でした。基本的に私が作成したのは単純なフェードインで、画像のホバー効果をフェードアウトします。

$(document).on('mouseenter','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
}); 

$(document).on('mouseleave','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
}); 

私はあなたがmouseenterを一緒に置くことができると知っていますが、私はそのようなトグル機能をどのように構造化するか分かりません。これを簡略化する方法を教えてください。

Answer 1

Javacscriptでこの効果を達成する理由はありますか？あなたは純粋なCSSで後にしている正確に何を達成することができます：あなたはここで働い例を見ることができます

#an-image { 
    opacity: 0.2; 
    transition: opacity 0.8s linear; 
} 

#an-image:hover { 
    opacity: 1; 
    transition: opacity 0.8s linear; 
} 

：http://jsfiddle.net/oqqx1z3k/

あなたはそれはあなたが与えた例と組み合わせて参照するthis exampleを表示することができます。

Answer 2

$('.photos div').hover(
    function() { 
    // MOUSE ENTER 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, function() { 
    // MOUSE LEAVE 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
); 

EDIT：機能的に結合するセレクタが文書化されていない、それは.photos divの「

Answer 3

だあなたはfadeTo()方法は、アニメーションあなたと同じである。またevent.type

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': opacity }, 800); 
}); 

を使用して区別することができます使用しています

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().fadeTo(800, opacity); 
}); 

Answer 4

次のようには、単一のトグル機能でこれを達成するために：

function toggleAnimation(eventName) 
 
{ 
 
    "use strict"; 
 
    
 
    $(document).find('img.nocolor').stop().animate({ 'opacity': 
 
      (eventName == 'mouseenter') ? '0' : '1' }, 800); 
 
} 
 

 

 
$(document).ready(function(){ 
 

 
    $(document).on('mouseenter mouseleave','.photos div',function (event) { 
 
    toggleAnimation(event.type); 
 
    }); 
 
});

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

 
<div class="photos"> 
 
    <div> 
 
<img width="300px" src="http://www.lb.undp.org/content/dam/lebanon/img/AboutLebanon/Lebanon.png" class="nocolor" /> 
 
    </div> 
 
</div>

Answer 5

私はこれをテストしていないが、私はあなたがやりたいだろう.fadetoggle（）関数を使用することができます信じ。

$('.photos div').on('mouseenter mouseleave',function() { 

    $(this).find('img.nocolor').togglefade('slow'); 
}); 

または

$('.photos div').on({ 
    mouseenter: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, 
    mouseleave: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
}) 

しかし、私は、トグルとMouseEnterイベントでの作業のファンではないし、これらの機能は、マウスの動きに基づいて動作するHTML文書に基づく位置ではないので、単純にmouseleave。