I've got a drop functioning dynamic drop down menu that I'd like to add a little more functionality to. The menu is the page navigation and hovering over a link changes the source of an image in the content area, reflecting the active link. It's a simple attr(src) change.

I've added some code to fade the active image out, change the source back to the default, and fade it and back in upon leaving the menu, but would like to frame that code within an If/Else statement; preventing the image from fading out and back in if it's source is unchanged from the default.

The syntax seems correct, but the function is not working correctly. I'm relatively new and am likely missing something. I'd greatly appreciate any advice for functional, more reliable code!

Thank you for your time, Daniel

The function embedded within the else statement (fade out, change source, fade in) works as I'd like it to.

$("#trigger").mouseleave(function(){
    var img = $("#img_home");
    if (img.src = "Images/IMG_4663_bw.jpg"){
      img.noop();
    } else {
      img.fadeOut(1000, function(){
         img.attr("src","Images/IMG_4663_bw.jpg");
         img.fadeIn(1000);
      });
    }
});

I've got a drop functioning dynamic drop down menu that I'd like to add a little more functionality to. The menu is the page navigation and hovering over a link changes the source of an image in the content area, reflecting the active link. It's a simple attr(src) change.

I've added some code to fade the active image out, change the source back to the default, and fade it and back in upon leaving the menu, but would like to frame that code within an If/Else statement; preventing the image from fading out and back in if it's source is unchanged from the default.

The syntax seems correct, but the function is not working correctly. I'm relatively new and am likely missing something. I'd greatly appreciate any advice for functional, more reliable code!

Thank you for your time, Daniel

The function embedded within the else statement (fade out, change source, fade in) works as I'd like it to.

$("#trigger").mouseleave(function(){
    var img = $("#img_home");
    if (img.src = "Images/IMG_4663_bw.jpg"){
      img.noop();
    } else {
      img.fadeOut(1000, function(){
         img.attr("src","Images/IMG_4663_bw.jpg");
         img.fadeIn(1000);
      });
    }
});

• javascript
• image
• fadein
• if-statement
• src

• jQuery doesn't quite qualify as backend development, it's still very front end. ;-) – deceze ♦ Commented Jan 4, 2011 at 23:40
• 1 I cannot believe that the title of this question is "jQuery if/else" - it's not jQuery - it's JavaScript!! – Jacob Relkin Commented Jan 4, 2011 at 23:41
• Sorry Jacob, just jumped in the pool. Using a jQuery library... but what do I know :) – technopeasant Commented Jan 4, 2011 at 23:48

4 Answers 4

if (img.src = "Images/IMG_4663_bw.jpg")

You're assinging the value, you need the == operator, not the = operator.
If you're only looking for the else condition though, just inverse the condition:

if (img.attr('src') != "Images/IMG_4663_bw.jpg") {
    // fade and stuff
}

img is a jQuery object.
You need to access its attributes by calling img.attr('src').

Your if condition assigns the img property; to check for equality, you need to use the == (equality) or === (strict equality) operators.

jQuery's noop method is a static method; you call it by writing jQuery.noop().

Finally, there's no point in calling noop() at all. First of all, there's nothing wrong with an empty pair of braces with no statements inside: if (something) { } else { ... }.
Also, you can just invert the if condition and get rid of the else:

if (img.attr("src") === "Images/IMG_4663_bw.jpg") {
  img.fadeOut(1000, function() {
     img.attr("src", "Images/IMG_4663_bw.jpg").fadeIn(1000);
  });
}

Syntax is incorrect. You need == in the if() statement instead of =, which does an assignment instead of a parison.

Also, in order to directly access the src property, you need to do it from the DOM element. You can use [0] to get the first img from the jQuery object.

if (img[0].src == "Images/IMG_4663_bw.jpg"){
    $.noop(); // The noop is called from the global jQuery object.
    //...

Try

$("#trigger").mouseleave(function(){
var img = $("#img_home"); 
 if (img.src == "Images/IMG_4663_bw.jpg"){
  img.noop(); 
 } 
 else {
  img.fadeOut(1000,function(){
  img.attr("src","Images/IMG_4663_bw.jpg");
  img.fadeIn(1000); 
  }); 
 } 
});

The difference is paring that source with the image path string. It should be ' == '