Question

I imagine this is pretty simple for someone in the know – but I can’t figure it out.

How would i simplify these two mousenter / mouseleave animations into one piece of code?

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

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

Thanks!

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); 
});

I wrote it like this simply to explicitly encompass your scenario here. If you simply want to have a hover function, you can do that too.