jQuery image swap и animate не работает

Question

Я пытаюсь сделать простой обмен изображениями, но когда я добавляю в свой код для свопа, он не работает! У меня есть функция переключения различных классов, которые анимируются с помощью CSS, которые отлично работают без кода обмена образцами, но как только я добавлю его во все его прерывания!

Может ли кто-нибудь быстро устранить мой код? Я чувствую, что моя логика JQuery немного отключена.

jQuery(document).ready(function() { 

var toggle = 0; 

var toggleClass = function() { 
    toggle = !toggle; 
    $(".two").toggleClass("two-menu", toggle); 
    $(".four").toggleClass("four-menu", toggle); 
    $(".images").toggleClass("images-menu", toggle); 
    $(".home").toggleClass("home-menu", toggle); 

    $("#bottom-left").toggleClass("bottom-left", !toggle); 
    $("#bottom-right").toggleClass("bottom-right", !toggle); 
    $("#margin-zero").toggleClass("margin-zero", !toggle); 

    $(".left-container").toggleClass("left-container-show", toggle); 
    $(".right-container").toggleClass("right-container-show", toggle); 
} 

var imageSwap = function() { 
     this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function() { 
    this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

jQuery(".home").click(function() { 

    toggleClass(); 

}); 

jQuery(".two").click(function() { 

    toggleClass(); 
    imageSwap();  

}); 

jQuery(".four").click(function() { 
    toggleClass(); 

}); 

}); 

Я создал два JSFiddles.

1) Первый не работает и включает в себя функцию imageSwap. http://jsfiddle.net/MuQ2w/

2) Второй не имеет imageSwap и отлично работает. http://jsfiddle.net/E2Rzv/

Answer 1

Проблемы вы испытываете из-за синтаксисом вас JQuery imageSwap, поскольку вы не можете записать две функции, разделенные запятой. Я думаю, что возможным решением может быть удаление второй функции. Также функция imageSwap не знает об этом, так как она выходит за пределы области. Вам нужно передать «это» в качестве аргумента. Таким образом, последняя функция imageSwap будет выглядеть следующим образом:

var imageSwap = function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

И ваш вызов этой функции будет, как:

jQuery(".two").click(function() { 
    imageSwap(this);  
    toggleClass(); 
}); 

Я надеюсь, что это поможет.

P.S. Чтобы следовать традиции, вот рабочая скрипка: jsfiddle.net/gKxLz

Answer 2

Вы смотрели в своей консоли ошибки? `

var imageSwap = function() { 
     this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function() { 
    this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

не правильный синтаксис: вторая функция не имеет имя переменной

Answer 3

Это трудно понять, что происходит без отладки кода.

Я предполагаю, что, возможно, проблема связана с объемом «этой» внутри функции imageSwap.

Try передать это (для обработчика) для функции imageSwap в качестве параметра, например:

var imageSwap = function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

jQuery(".two").click(function() { 
    toggleClass(); 
    imageSwap(this, this);  

}); 

Надеется, что он будет работать