Метод jQuery .fadeTo() с.click()

Question

Я использую.fadeToggle(), чтобы добавить и исчезнуть элемент div. Вот его HTML и скрипт

<div id="image2"><img src="http://placehold.it/350x350" /> </div>
<div class="divButton2"><br/> Button 3!</div>

  $(document).ready(function(){
    $('.divButton2').click(function(){
        $('div#image2').fadeToggle('slow');
    });
});

Сейчас я использую метод.fadeTo() с полупрозрачной непрозрачностью

 $(document).ready(function(){
    $('.divButton2').click(function(){
        $('#image2').fadeTo('slow', 0.5);
    }); 
});

и как только я нажимаю кнопку, она наполовину исчезает, теперь я хочу нажать снова, чтобы она полностью вернулась. Как я могу это сделать?

Answer 1

 $(document).ready(function(){
    $('.divButton2').click(function(){
     if($('#image2').css('opacity') == 1){
       $('#image2').fadeTo('slow', 0.2);
     }else{
       $('#image2').fadeTo('slow', 1);
     }  
    }); 
});

или вы можете использовать.animate ()

 $(document).ready(function(){
        $('.divButton2').on('click',function(){
         if($('#image2').css('opacity') == 1){
           $('#image2').animate({'opacity': 0.2}, 1000);
         }else{
           $('#image2').animate({'opacity': 1}, 1000);
         }  
        }); 
    });

JSFIDDLE