Jquery Hover To Slide?

July 30, 2023 Post a Comment

Check the bottom for revised edition Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view. Here's the HTML:

Solution 1:

Part of the problem is that slideUp() in jQuery hides the selection and slideDown()shows the selection. To have an element slide up into view, you need to do your own .animate().

CSS:
  #one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    height: 40px;
  }

  #onediv { 
    position: absolute;
    bottom: -100%;
  }

jQuery:
  $('#one').hover(
    function() {
        $(this).find('div').animate({
            bottom: '0%'
        }, 'fast' );
    },function() {
        $(this).find('div').animate({
            bottom: '-100%'
        },'fast');
    }
  );

jsFiddle: http://jsfiddle.net/blineberry/mrzqK/

Solution 2:

what about using jQuery slideUp or fadeIn?

http://api.jquery.com/slideToggle/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

This code works for me.

$(document).ready(function () {

    $('#one').hover(function () {
        $('#one > div').slideDown();
    });

});

Needs a bit of tweeking to make it look nice but it does slide down.

edit

Here is a site describing how to use animate to do what you want.

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

Solution 3:

you may do something like this

$(div).show("slide", { direction: "down" }, 1000)

or even the animate property may solve your problems

more here

http://docs.jquery.com/UI/Effects/Slide api.jquery.com/animate/

Solution 4:

firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)

secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?

I added a bg color for demo purposes.

hears a little demo: http://jsfiddle.net/R9A3G/

If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().

Solution 5:

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><style>#onediv { display: none; }</style><head><title></title></head><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><script>
   $(document).ready(function() {

    $('#one').hover(function() {

      $("#one").find("div").slideDown("slow");
    });
    $('#one').mouseout(function() {

      $("#one").find("div").slideUp("slow");
    });
});
</script><body><div><liid="one"><div><h4>title</h4><p>description</p></div></li></div></body></html>

TRY THIS

javascript nyumon