0

Hi Guys I'm looking for div panel which has this animation when mouse is over panel will expand and in the background page will get an opacity. http://www.emirates.com/uk/english/index.aspx here is an example what I'm trying to mean if you go down to 4 pics on the bottom of the page you will understand what I mean..

Thanks in advance

3
  • They're using jQuery UI to implement this animation. Oct 11, 2012 at 14:16
  • 1
    when you already know that your linked page has the functionality you are looking for, why don't you just go through the code of the page and track how it works? Oct 11, 2012 at 14:17
  • I know but what I'm asking is that what is that animation I tried mouseover div expand but its not the same, do you know any examples similar to that I need to use it.. if i knew exactly what sort of jquery they used i would go through every code figure it out..
    – Jas
    Oct 11, 2012 at 14:18

1 Answer 1

1

Here's a similar solution:

html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<img id="smallBall" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png" />
<img id="animateBall" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png" />

javascript:

$('#smallBall ').mouseenter(function() {
      $(this).animate({
        opacity: "0.3",
        filter: "alpha(opacity=30)"
    }, 500);
    $('#animateBall ').animate({
        height: 100,
        width: 100,
        left: "+=25",
        top: "+=25"
    }, 500);
});$('#smallBall ').mouseleave(function() {
      $(this).animate({
        opacity: "1.0",
        filter: "alpha(opacity=100)"
    }, 500);
    $('#animateBall ').animate({
        height: 0,
        width: 0,
        left: "-=25",
        top: "-=25"
    }, 500);
});

Try it here.

BTW: I through this together really quickly so I didn't work on the problems causing the false positives on the mouseLeave events. A more clearly defined boundary on the target would fix this problem I imagine.

You could also toggle it onClick here.

8
  • Thanks James i will try to implement but it doesn't seems the right one anyways will try :)
    – Jas
    Oct 11, 2012 at 15:20
  • Your welcome.. Sorry if I misunderstood the question. Hope it works for you. Oct 11, 2012 at 15:25
  • James what's this animation called in general maybe i can work around it..
    – Jas
    Oct 11, 2012 at 15:46
  • If I understand the question, the opacity animation can be created by using the .fadeTo() function. This is probably actually a better solution than I gave because the jquery lib would keep up with future browser specs. Oct 11, 2012 at 16:37
  • The real question is I want to create divs just like the ones on there, I mean when I hover my mouse on it my div will expand in an animated way opacity isn't a problem..
    – Jas
    Oct 11, 2012 at 16:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.