jQuery Image Flicker on Hover

Question

I have a picture exactly on top of a Vine video. I want the picture to go away upon mouseover and reappear on mouseout. In other words, the Vine is only visible when the mouse is over the picture.

With the current code I have the image flickers in and out. I think the problem might be with the Vine behind the picture. I've tried playing with z-indexes, but no cigar.

Here's my code (I'm using span to wrap #picture)

  <div class = "vine-two media">
<span><img id = "picture" class = "on-top" src = "img/kanye.jpg"></span>

  <iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>


<script>

 $(document).ready(function() {
    $('span').mouseover(function () {
           $('#picture').hide();
       }).mouseout(function () {
      $('#picture').show();
    });
});
</script>
</div>

CSS:

.on-top {
position: absolute;
z-index: 1000;
width: 240px;
height: 240px;
}
.adj-size{
width: 240px;
height: 240px;
}

I forgot to add it! Just did so. – Reed Martin Dec 18 '13 at 21:35 — Reed Martin, Dec 18 '13 at 21:35
Please post relevant html also. – Bryan Elliott Dec 18 '13 at 21:36 — Bryan Elliott, Dec 18 '13 at 21:36
Probably need to see some html too – Captain John Dec 18 '13 at 21:36 — Captain John, Dec 18 '13 at 21:36

Wayne · Answer 1 · 2013-12-18T21:58:02.157

3

You need to use mouseenter and mouseleave. http://api.jquery.com/mouseenter/ follow that link and you can see the difference in the example. Mouseover fires multible event, which is likely the source of the flicker.

Update:

seeing the code, I would set the iframe to hidden until it is ready to play. Flash causes overlay problems. The youtube solution is http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque which puts the flash into wmode=opaque. vine may have something as well.

edited Dec 18 '13 at 21:58

answered Dec 18 '13 at 21:37

Wayne

4,760
1
24
24

I've tried mouseenter/mouseleave as well. The same problem occurs. – Reed Martin Dec 18 '13 at 21:42
Is the iframe delivering flash? http://stackoverflow.com/questions/5281002/z-index-and-iframes flash appears ontop of other content unless it delieved with wmode="transparent" http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embe – Wayne Dec 18 '13 at 21:50
No flash. Vine uses HTML5 in the browser. – Reed Martin Dec 18 '13 at 22:01

Roko C. Buljan · Answer 2 · 2013-12-18T21:54:38.860

span can be any span on your page therefore it's a BAD way to do things,
you need to be more specific with your selectors:

$(function() { // DOM ready shorthand

   $('.picture').hover(function () {
       $(this).fadeToggle(); // make video underneath visible
   });

   // other DOM ready stuff here

});

Or follow this implementation example: DEMO

<div class="video">    
  <!-- video here -->
  <img src="image.jpg">    
</div>

.video{
  position:relative;
  width:400px;
  height:280px;
}
.video img{
  position:absolute;
  top:0;
  left:0;
}

$('.video').hover(function(){
  $(this).find('img').fadeToggle();
});

To explain the basic trick is to point the hover event to a common video and img parent, in this case the DIV . video.

Also this will work:

$('.video').hover(function(){
  $("img", this).fadeToggle();
});

Additionally if you want to prevent hysteric users to see animation buildups you can add .stop() method like:

$('.video').hover(function(){
  $("img", this).stop().fadeToggle();
});

Also with the HTML I provided it can be all done using just CSS: http://jsbin.com/amiBOKu/4/edit

.video:hover > img{
    display:none;
}

That's the only instance of 'span' I've used. It's a tiny html file. — Reed Martin, Dec 18 '13 at 21:43

404 Not Found · Answer 3 · 2013-12-18T21:50:09.330

0

When it disappears the image will register the mouseout event which will make the image show up again.

One possible solution is to try $('#picture').css('visibility','hidden'); instead of using hide(), and $('#picture').css('visibility','visible'); to show it. I think this will prevent mouseOut from triggering when the image is hidden as the image is still there, just invisible.

edited Dec 18 '13 at 21:50

answered Dec 18 '13 at 21:40

404 Not Found

3,635
2
28
34

This works until I mouseleave, at which point the picture disappears altogether. – Reed Martin Dec 18 '13 at 21:47
I misspelled `visible`. That would probably be the problem. – 404 Not Found Dec 18 '13 at 21:49
Same problem :/ Thanks so much for the help though. – Reed Martin Dec 18 '13 at 22:02

score 0 · Answer 4 · edited Dec 18 '13 at 22:15

0

I'd suggest a little restructuring, as well as using hover instead of mouseover and mouseout. The reason you're seeing the flicker is because mouseout fires once the image fades, whereas hover will only fire once on mouse in and once on mouse out.

Example:

HTML:

<div class = "vine-two media">
    <img class = "on-top picture" src = "http://data2.whicdn.com/images/27599232/kanye-west-announces-new-design-company-called-donda-1_large.jpg">
    <iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
</div>

JS:

$('.media').hover(function() {
    // mouse enter
    $('.picture', this).hide();
}, function() {
    // mouse leave
    $('.picture', this).show();
});

Fiddle

edited Dec 18 '13 at 22:15

Roko C. Buljan

196,159
39
305
313

answered Dec 18 '13 at 21:48

Samsquanch

8,866
12
50
89

wrong HTML elements positioning (implies the use of the unneeded `z-index`) Wrong use of `$(this)`, and verbose use of the `hover()` *to toggle child* method. – Roko C. Buljan Dec 18 '13 at 21:52
The HTML is a modification of OP, the CSS is a copy/paste from the OP, $(this) is valid, and the verbose use of hover and show/hide where to mimic the code in the OP. I'm trying to show OP how he can modify his code to work in an understandable way, not completely change it. – Samsquanch Dec 18 '13 at 21:58
Than you don't understand exactly the use of the `this` reference in jQuery. – Roko C. Buljan Dec 18 '13 at 21:58
`Than` you should explain why it's wrong instead of downvoting a valid answer and leaving a snarky unhelpful comment? – Samsquanch Dec 18 '13 at 22:00
You've still not explained why using `$(this)` is wrong vs `this`. – Samsquanch Dec 18 '13 at 22:04
Wrapping an object again into a `$()` is an unneeded overhead, cause `this` is already the reference to the targeted element object. Hope was useful otherwise some Googleing might be worth. – Roko C. Buljan Dec 18 '13 at 22:07
You stated it was a "wrong use of `$(this)`" when it's clearly not wrong. The most efficient? No, but not wrong. – Samsquanch Dec 18 '13 at 22:10
Sure, and we're here to teach people hot to do sloppy code and overheading references to the `this` object... Hope you got my thoughts... :| (and also `.find()` is way faster :) ) – Roko C. Buljan Dec 18 '13 at 22:13

score 0 · Accepted Answer · answered Dec 18 '13 at 21:54

Is the span-tag around the image? If yes, I could imagine that you are hovering over the span, then the image disappears and the span becomes smaller (0x0 pixels) and the mouse cannot hover anymore over the span.

Perhaps try something like this:

<div class="completely_hovering_over_the_video" style="width:video_width;height:video_height" >
   <img id="picture" src="bla.jpg">
</div>

With this code I am trying to show you a DIV that completly covers the video and has a fixed width and a fixed height. This DIV will not change it's dimensions even if the IMG becomes smaller or invisible. If you hover the DIV hide the IMG and vise versa.

That's true. This would be even more awsome and cleaner code. — rulebot, Dec 18 '13 at 22:13

jQuery Image Flicker on Hover

5 Answers5