Whats the better way of preventing from effect on hovering out?

Question

I have a simple plugin made which just adds a flip effect to a div. When we hover over a div we get the div flipped but then when we hover back we get another flip!

I fixed that by adding return: false in the second parameter function of hover() in jQuery.

My question is that, is there a better way of stopping from hovering out?

JS:

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.hover(function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }, function(){
        return false;
    });
}

HTML + CSS:

.flipper {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMMSb5XY_fztmTj2rSwFNn-nw2zxId1ZJLnuFfy39Rk-g2fHZ1) no-repeat;
    background-size: 98% 98%;
    background-position: 4px 4px;
    width: 400px;
    height: 400px;
    background-color: #eee;             
}
.fake {
    position: relative;
    top: -200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}
.fake1 {
    position: relative;
    top: 200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}

<body>
    <div class="flipper">
        <div class="fake" /></div>
    <div class="fake1" />
</body>

Fiddle(with problem).

Fiddle(with workaround).

Is there a better way to do it? Or is the only way to do it?

Thanks for any help.

I'd suggest you to first learn how to close HTML tags before jumping into DOM manipulation with JavaScript — Roko C. Buljan, Jul 06 '13 at 15:38
@MohammadAreebSiddiqui In proper html there are no self-closing div tags and your div tag with the 'flipper' class is not closed at all. — Sumurai8, Jul 06 '13 at 15:44
@Sumurai8 it's closed, see after div with `class='fake'` and see this: http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag — Mohammad Areeb Siddiqui, Jul 06 '13 at 15:45
@MohammadAreebSiddiqui Sorry, I should have said xhtml. If you want your page to properly display in the majority of browsers, you'll need to validate it in xhtml. This is not valid xhtml, so it will display 'how the browser feels like it should be displayed', which is usually not how you want it to be displayed. — Sumurai8, Jul 06 '13 at 15:48

score 1 · Accepted Answer · answered Jul 06 '13 at 15:39

.hover() (docs) is a shorthand for .on( 'mouseenter' ) and .on( 'mouseleave' ). Simply only bind the mouseenter event with .on( 'mouseenter' ).

Your code would be:

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.on( 'mouseenter', function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }
  });
}

If this answers your question, I would appreciate it if you accepted the answer. — Sumurai8, Jul 06 '13 at 15:49

Whats the better way of preventing from effect on hovering out?

1 Answers1