1

I've written a jQuery plugin which makes an element pulse. It's working great in Chrome and Internet Explorer 9. In Internet Explorer 8, it's not working after the setTimeout call.

I've created a jsFiddle to demonstrate the problem: http://jsfiddle.net/Guykp/ Here's the javascript code:

$(document).ready(function() {
  $.fn.pulseEffect = function(delay, duration) {
    var $element, animateOptions;
    $element = $(this);
    if (!$element.is(":hover")) {
      animateOptions = {
        opacity: $element.css("opacity") === "1" ? .6 : 1
      };
      $element.animate(animateOptions, duration);
    }
    return setTimeout((function() {
      return $element.pulseEffect(delay, duration);
    }), delay + duration);
  };

  $("#pulse-element").pulseEffect(0, 1000);
});

How can I make it working in Internet Explorer 8?

This is the error message from Internet Explorer 8: Syntax error, unrecognized expression: unsupported pseudo: hover

This is the solution: How do I check if the mouse is over an element in jQuery?

Community
  • 1
  • 1
Martin
  • 2,302
  • 2
  • 30
  • 42
  • You can't return a value from a function inside `setTimeout`. – gen_Eric Oct 23 '12 at 20:09
  • 1
    I know, but the code is written using CoffeeScript. CoffeeScript returns the last statement inside each function. But thanks! :-) – Martin Oct 23 '12 at 20:11
  • 2
    There are numerous issues with your code. First of all, `setTimeout` only returns the TimeoutHandle. Secondly, everyone knows `:hover` doesn't play well with web browsers. Instead of `return setTimeout(...);` write it as `setTimeout(...); return $this;` – Christian Oct 23 '12 at 20:13
  • 1
    http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery/2846405#2846405 – jbabey Oct 23 '12 at 20:13
  • @Martin, if the code is written in CoffeeScript, please tag with the coffeescript tag so that we know what language you are speaking. – Heretic Monkey Oct 23 '12 at 20:16
  • @MikeMcCaughan: The question has nothing to do with CoffeeScript. CoffeeScript is a language that compiles *into* JavaScript. This is the output, it's JavaScript. – gen_Eric Oct 23 '12 at 20:17
  • I've fixed the tag. Anyway, CoffeeScript or not, it does not make sense. setTimeout() is asynchronous: it can't returning something if it didn't happen there and then. – Christian Oct 23 '12 at 20:17
  • @MikeMcCaughan, The code you're looking at is JavaScript (compiled from CoffeeScript). So it's not CoffeeScript anymore :-) – Martin Oct 23 '12 at 20:17
  • @Martin / Rocket - I disagree. Just because I write a program in C or PHP, I don't throw in dumps of assembly/opcodes on SO. Also, if that is really javascript, then my and Mike's argument about setTimeout holds (not that I doubted it). – Christian Oct 23 '12 at 20:18
  • @RocketHazmat, @Martin, if the code I'm looking at is CoffeeScript, then returning from `setTimeout` is okay. If the code I'm looking at is JavaScript, the returning from `setTimeout` is not okay. @Martin, in his creplay to @RockHazmat's comment to that effect, said it's CoffeeScript, so it's okay. How can I tell what's right? – Heretic Monkey Oct 23 '12 at 20:20
  • @MikeMcCaughan: Returning from `setTimeout` is fine, it just doesn't actually do anything. – gen_Eric Oct 23 '12 at 20:21
  • @RocketHazmat IE8 also doesn't support malformed code. – Christian Oct 23 '12 at 20:21
  • @Christian: Nor do most other browsers. – gen_Eric Oct 23 '12 at 20:21
  • Really? Ever heard about jQuery chaining? You think it would chain if it kept returning nulls or just numbers? – Christian Oct 23 '12 at 20:21
  • @Christian: Chaining? Who are you talking to? – gen_Eric Oct 23 '12 at 20:22
  • 1
    @RocketHazmat `$('a').pulseEffect().click(); // error, null not an object` – Christian Oct 23 '12 at 20:23
  • @Christian: Oh! I'm very sorry. I was ignoring the title. – gen_Eric Oct 23 '12 at 20:32
  • Good. Slightly offending text removed :) – Christian Oct 23 '12 at 20:32
  • Thank you for spotting the wrong assumption in the title of the question. I've updated the title and added the solution for future readers. Thanks again. – Martin Oct 23 '12 at 20:41

2 Answers2

2

jQuery does not have a :hover selector anymore. Some browsers support :hover natively, but others don't. jQuery used to use its CSS engine, Sizzle, to to this, but it no longer does.

Try using the hover (or mouseenter/mouseleave) event(s).

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
0

its like

$('li:hover).css('display', 'block'); is equivalent to $().css('display', 'block');

like Rocket Hazmat said use the jquery hover

NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143