CODEWITHSUNDEEP
jqueryhtmlcssbounce
Brieuc
Brieuc

Reputation: 4114

Jquery effect bounce, Unwanted behaviour

I'm fixing few stuff on this website

The first slide has a button to scroll down. While hovering it is supposing to bounce on a vertical axes.

It is working totally fine on firefox but on other browsers such as Chrome, Opera, safari and IE the button is moving to the left.

here the html :

<div class="container" id="welcome-inner-box">
    <div class="scroll-down-arrow"><div>SCROLL DOWN</div><img alt="scroll-down-canvas" src="<?php echo $this->basePath(); ?>/img/scrolldown_icon.png"></div>
</div>

here the javascript :

$('.scroll-down-arrow').mouseenter(function(){
    $(this).effect("bounce", { times: 4 }, 1000);
    $('.scroll-down-arrow a').css('color', '#fff');
});

$('.scroll-down-arrow').mouseleave(function(){
    $('.scroll-down-arrow a').css('color', '#999999');
    $(this).stop();
});

here the css :

.scroll-down-arrow{
    cursor:pointer;
    color:#cccccc;
    text-transform:uppercase;
    position:absolute;
    width:140px;
    left:50%;
    margin-left:-70px;
    height:60px;
    bottom:30px;
    text-align:center;
    letter-spacing:2px;
    font-weight:100;
    font-size:14px;
}

Upvotes: 0

Views: 781

Answers (3)

Brieuc
Brieuc

Reputation: 4114

I just found a solution. I apply the effect on the children element and i wrapped the img in a div (if not the img will also go left).

$('.scroll-down-arrow').mouseenter(function(){
    $(this).children().effect("bounce", { direction:'up', times: 4 }, 1000); 
});

<div class="scroll-down-arrow">
    <div>SCROLL DOWN</div>
    <div>
        <img alt="scroll-down-canvas" src="<?php echo $this->basePath(); ?>/img/scrolldown_icon.png">
    </div>
</div>

Upvotes: 0

Karim AG
Karim AG

Reputation: 2193

Without seeing the full code I can't exactly define your problem, but it seems to me that this is caused by jQuery UI, because when you hover over the element, it gains the class ui-effects-wrapper and jQuery overwrites the style attribute to add this: left : 570px;

If I am correct, then the solution would be to overwrite this class to ui-effects-wrapper or to remove the left property of your element which is 50%.

The first solution will be implemented like this:

.ui-effects-wrapper { left:50% !important; }

But this will affect any other part on your page that is using the same class, so be aware of this.

Furthermore if you reproduce your problem in a fiddle we can specify the problem with better analysis.

Upvotes: 0

Ayo Makanjuola
Ayo Makanjuola

Reputation: 638

You need to specify the direction in the argument to the bounce command

Replace

$(this).effect("bounce", { times: 4 }, 1000);

With 

$(this).effect("bounce", { direction:'up', times: 4 }, 1000);

Upvotes: 1

Related Questions