合并jquery mouseenter / mouseleave动画

Question

我想这对于知情人士来说非常简单 - 但我无法弄明白。

如何将这两个mousenter / mouseleave动画简化为一段代码？

$("#newsitem").mouseenter(function(){
$("#newsitem").stop().animate({ width: "300px", opacity: "1"     }, 300 ); 
});

$("#newsitem").mouseleave(function(){
$("#newsitem").stop().animate({  width: "204px", opacity: "0.5"   }, 300 ); 
});

谢谢！

Answer 1

$("#newsitem").bind('mouseenter mouseleave', function(e) {
    var dynamicWidth = e.type === 'mouseenter' ? 300 : 204;
    var dynamicOpacity = e.type === 'mouseenter' ? 1 : 0.5;
    $(this).stop().animate({ width: dynamicWidth, opacity: dynamicOpacity }, 300); 
});

我这样写的只是为了明确地包含你的场景。如果您只想拥有悬停功能，也可以这样做。

Answer 2

这将是这样的：

$("#newsitem").hover(function(){
    //mousein events
},function(){
    //mouseout events    
});

Answer 3

$("#newsitem").mouseenter(function(){ $(this).stop().animate({ width: "300px", opacity: "1" }, 300 ); }).mouseleave(function(){ $(this).stop().animate({  width: "204px", opacity: "0.5" }, 300 ); });