CODEWITHSUNDEEP
javascriptjqueryanimationhtml
Tbi45
Tbi45

Reputation: 607

buggy JQuery hover animation

What i want to create is something like this. When hover there should be a slide down with info (like in the example when mouseover an img). What i have is this. The problem is that when the pointer is over an child element (<a>or <p>) the info box is bouncing up and down.

the html:

  <ul>
   <li>
   <div id="box_1" class="prevw_box">
     <div id="box_1-rep" class=" box-rep text1"><h3>CONDUCTIVE GRID TAPE</h3>
    <p class="p1">A lot of text ......a lot of text</p>

     <a class="see_product" href="#"></a>

     </div>

    </div>
   </li>

  </ul>

the css:

    .box-rep {
     position:absolute;
     top:-220px;
     left:0;
     width:238px;
     height:440px;
     background-color:#887455; }

   .prevw_box {
      position:relative;
      float:left;
      width:238px;
      height:220px;
      overflow:hidden;}

and of course the jQuery code is:

  $('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

I struggled to resolve the problem for the past days but i can't take it anymore. I need the idea, the alternative solution.

Thank you for the fast answers! I was so frustrated lately because of this. There was so many variants that i tried and i redone the code over and over again. The problem is solved! Thanks again!

Upvotes: 1

Views: 755

Answers (6)

adeneo
adeneo

Reputation: 318162

I'd do it like this:

$('#nav_bar li').css('backgroundPosition', '-224px 0').on({
    mouseenter: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-20px 0px)"}, 250);
    },
    mouseleave: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-224px 0px)"}, 250);
   }
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on({
    mouseenter: function() {
        $(this).stop(true, true).animate({top:"0px",opacity:"0.8"},250);
    },
    mouseleave: function() {
        $(this).stop(true, true).animate({top:"-220px",opacity:"0.0"},250);
    }
});

DEMONSTRATION | CODE ​

The shortened version would look like this :

$('#nav_bar li').css('backgroundPosition', '-224px 0').on('mouseenter mouseleave', function(e) {
    $(this).stop(true,true).animate({backgroundPosition:"(-"+(e.type=='mouseenter'?20:224)+"px 0px)"}, 250);
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on('mouseenter mouseleave', function(e) {
    var state = e.type=='mouseenter';
    $(this).stop(true, true).animate({top: (state?0:-220),opacity:state?0.8:0},250);
});

FIDDLE

Upvotes: 1

PhearOfRayne
PhearOfRayne

Reputation: 5050

Your .mouseover method looks good, but you should probably add a .stop() to your .mouseout method as well so your code will be like this:

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).stop().animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

Try it and update your test url

Upvotes: 1

Jai
Jai

Reputation: 74738

Use it this way:

$('.box-rep').css({
   "top": "-220px",
   "opacity": "0.1"
}).mouseover(function() {
   $(this).stop().animate({
      top: "0px",
      opacity: "0.8"
}, 250);
}).mouseout(function() {
  $(this).animate({
      top: "-220px",
      opacity: "0.1"
}, 250);
});

fiddle is here: http://jsfiddle.net/Gbqpv/

Upvotes: 0

Mordhak
Mordhak

Reputation: 2656

Simply add a stop() call in your mouseout and it works like a charm.

jsFiddle here

Upvotes: 1

Sergii Stotskyi
Sergii Stotskyi

Reputation: 5390

Just use jquery.hover instead of mouseover and mouseout - http://api.jquery.com/hover/

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.hover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    }, function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})​

JsFiddle: http://jsfiddle.net/HDUVK/

Upvotes: 0

axel.michel
axel.michel

Reputation: 5764

Try mouseenter and mouseleave instead of mouseover, mouseout. 

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseenter(function(){
$(this).stop().animate(
    {top:"0px",opacity:"0.8"},{duration:250})
    //$(this).stop()
})

.mouseleave(function(){
$(this).animate(
    {top:"-220px",opacity:"0.0"},{duration:250})
})

Upvotes: 3

Related Questions