CODEWITHSUNDEEP
jquerycss
DannyBoy
DannyBoy

Reputation: 1734

Background not changing back to original

I'm trying to change the background of the .search-toggle div when .search-container is visible and then i want it to return to its original background image.

The issue i am having is that it is not returning to the original image.

I have set up a fiddle using background-color rather than background-image.

Please could you enlighten me on how i could amend the JQuery code to ensure this happens. if you have time an explanation would be appreciated also as i'm quite new to JQuery and any help is appreciated.

Fiddle link: http://jsfiddle.net/wnGJM/1/

Here is the code:

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)");
        }

    });

Thanks.

Upvotes: 1

Views: 84

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196142

Do you know that you can do this with CSS trantitions and only use js to toggle a class ?

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

(i am using body just for illustration.. any common parent would work)

and adding transition:all 0.5s; to your css rule of the animating element..

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

demo at http://jsfiddle.net/wnGJM/6/

Upvotes: 1

Tsanyo Tsanev
Tsanyo Tsanev

Reputation: 1309

Since you are using position to show and hide search container .is(':visible') will always be true and also in your case $(this) is a reference to #search-toggle, not #search-container, which is also always visible. It would be easier to just use the if statement where you show/hide the search-container. There you can also change the background of the search-toggle

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");
    }
});

Upvotes: 0

Tiago César Oliveira
Tiago César Oliveira

Reputation: 810

The element is always visible. You can suppress that last if statement and use your actual logic block:

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");
      }
  });

For your actual code, just replace the background-color parts with whatever applies to this case.

Upvotes: 1

Related Questions