Basic jquery how to combine current slide/fade elements and fix opacity?

Notice #element2, I have two functions but only the s开发者_JS百科lide function works. I would like when you hover over it you start at 50% opacity and fade into 100%

Here's the code:

  $("#element2").hover(function() {
        $("#next").show("slide", { direction: "right" }, 300); 
        $("#next").fadeIn(300);
    },
        function() {
            $("#next").hide("slide", { direction: "right" }, 300); 
        $("#next").fadeOut(300);
    });

Here's the code in action: http://jsfiddle.net/pQzWp/9/

---

There is an excellent answer here:

http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/

You should use animate. In your particular case, I believe the following should work:

$("#next").animate({opacity: 'toggle', width: 'toggle'}, 300);