Question

我试图在.search-container可见时更改.search-toggle div的背景，然后我希望它返回原始背景图片。

我遇到的问题是它没有返回到原始图像。

我使用背景色而非背景色设置了小提琴。

请您告诉我如何修改JQuery代码以确保发生这种情况。如果你有时间，我将非常感谢您的解释，因为我对JQuery很陌生并且感谢任何帮助。

以下是代码：

var speed = 500;
    $('#search-toggle').on('click', function(){

        var $$ = $(this),
            panelWidth = $('#search-container').outerWidth();

        if( $$.is('.myButton') ){
            $('#search-container').animate({right:0}, speed);
            $$.removeClass('myButton')
        } else {
            $('#search-container').animate({right:-panelWidth}, speed);
            $$.addClass('myButton')
        }

        if($(this).is(':visible')){
           $('#search-toggle').css("background-image", "url(images/close-icon.png)");
        } else {
           $('#search-toggle').css("background-image", "url(images/search-icon.png)");
        }

    });

感谢。

Answer 1

元素始终可见。您可以禁止上一个if语句并使用您的实际逻辑块：

JsFiddle

  var speed = 500;
  $('#search-toggle').on('click', function () {
      var $$ = $(this),
          panelWidth = $('#search-container').outerWidth();

      if ($$.is('.myButton')) {
          $('#search-container').animate({
              right: 0
          }, speed);
          $$.removeClass('myButton');
          $$.css("background-color", "#0F0");
      } else {
          $('#search-container').animate({
              right: -panelWidth
          }, speed);
          $$.addClass('myButton');
          $$.css("background-color", "#000");
      }
  });

对于您的实际代码，只需将background-color部分替换为适用于此情况的部分。

Answer 2

你知道你可以用CSS trantitions做到这一点，只用js来切换一个类吗？

$('#search-toggle').on('click', function(){
    $('body').toggleClass('active');
});

（我使用body仅用于说明..任何普通父母都可以工作）

并将transition:all 0.5s;添加到动画元素的css规则中。

.active #search-toggle{
    background-color:#0F0;
}
.active #search-container{
    right:0px;
}

演示http://jsfiddle.net/wnGJM/6/

Answer 3

由于您使用的位置显示和隐藏搜索容器.is(':visible')将始终为真，并且在您的情况下$(this)是对#search-toggle的引用，而不是#search-container，这是也始终可见。只使用显示/隐藏搜索容器的if语句会更容易。在那里你也可以改变搜索切换的背景

http://jsfiddle.net/wnGJM/3/

var speed = 500;
$('#search-toggle').on('click', function(){
    var $$ = $(this),
        panelWidth = $('#search-container').outerWidth();
    if( $$.is('.myButton') ){
        $('#search-container').animate({right:0}, speed);
        $$.removeClass('myButton').css("background-color", "#0F0");
    } else {
        $('#search-container').animate({right:-panelWidth}, speed);
        $$.addClass('myButton').css("background-color", "#000");
    }
});

背景不会变回原创

3 个答案:

JsFiddle