CODEWITHSUNDEEP
javascriptjqueryhtml
user3013745
user3013745

Reputation: 59

fade in when hover and fadeout when mouse goes away

I wrote this code that fades in a non displaying div but i don´t really know how to fadeout the div again when the mouse goes away. any suggestions?

$(document).ready(
        function(){
        $("#crep").hover(function (e) {
            e.preventDefault();
            $(".wrapper2 img, #galerie, #ueber, #djs").invisible();
            $(".carta ,#crepes, #crepes2").fadeIn();
        });
    });

Upvotes: 0

Views: 101

Answers (2)

Aditya
Aditya

Reputation: 4463

Use .hover which is used to

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

Eg: $( selector ).hover( handlerIn, handlerOut )

JS:

$("#crep").hover(function (e) {
            e.preventDefault();
            $(".wrapper2 img, #galerie, #ueber, #djs").invisible();
            $(".carta ,#crepes, #crepes2").fadeIn();       
         }, function(){
            e.preventDefault();
            $(".carta ,#crepes, #crepes2").fadeOut();
    });

Upvotes: 1

VVV
VVV

Reputation: 7593

.hover can have two functions... one for mouseenter the other for mouseleave.

FIDDLE

$(document).ready(
  function () {
    $("#crep").hover(
      function (e) {
        e.preventDefault();
        //$(".wrapper2 img, #galerie, #ueber, #djs").invisible(); //what does invisible do ??
        $(".carta ,#crepes, #crepes2").stop().fadeIn();
      },
      function (e) {
        e.preventDefault();
        //$(".wrapper2 img, #galerie, #ueber, #djs").invisible(); //what does invisible do ??
        $(".carta ,#crepes, #crepes2").stop().fadeOut();
      }   
    );
});

Upvotes: 0

Related Questions