开发者

Hover on one div, use jQuery to slide in another div from right

开发者 https://www.devze.com 2023-03-20 21:39 出处:网络
I have the following: <div class=\"holdingbox\"> <div class=\"leftbox\">Stuff</div> <div class=\"rightbox\">Stuff to reveal</div>

I have the following:

<div class="holdingbox">
 <div class="leftbox">Stuff</div>
 <div class="rightbox">Stuff to reveal</div>
</div>

holdinbox has overflow of hidden leftbox is left floated rightbox is right floated and all the way outside of the holdingbox except for the edge (just enough so it looks like a tab).

On hover of holdingbox, I want rightbox to slide in (it will have an answer to a question in leftbox). When mouse is moved away rightbox slides back out.

I know I n开发者_Go百科eed jQuery for this but I'm a bit stumped on how to use hover on one div to slide in another div from the right.

Any help is appreciated!

Thanks, Chris


Do you mean something like this?

You just need to do some calculations of your divs widths and animate a container properly. Good luck.


$('div.holdingbox').hover(function(){
    $(this).find('div.rightbox').animate(
        { 'margin-top': '-100px' }
    ); 
});

And you can play with the exact animation

0

精彩评论

暂无评论...
验证码 换一张
取 消