フッタが画像を変更して切り替える

Question

私に助けになる機会を与えてくれてありがとう。

私はトグルフッタ（スライドパネル）を作成したいと思います。

以下のコードはうまく動作しますが、パネルをスライドさせたときに画像を変更できるようにしたいと考えています：画像は開閉（矢印上から下へ）のために異なります。

この機能をこのコードと統合するにはどうすればよいですか？

事前に感謝します。ここで

はコードです：

<script type="text/javascript"> 
jQuery(function($) { 
var slide = false; 
var height = $('#footer_content').height(); 
$('#footer_button').click(function() { 
var docHeight = $(document).height(); 
var windowHeight = $(window).height(); 
var scrollPos = docHeight - windowHeight + height; 
$('#footer_content').animate({ height: "toggle"}, 1000); 
if(slide == false) { 
    if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML. 
     $('html').animate({scrollTop: scrollPos+'px'}, 1000); 
    } else { 
     $('html, body').animate({scrollTop: scrollPos+'px'}, 1000); 
    } 
         slide = true; 
} else { 
         slide = false; 
       } 
}); 
}); 
</script> 

Answer 1

あなたがイメージソースを変更することで、画像を変更することができます。

$('.classOfImage').attr('src','/images/up.png'); 

あなたのイメージはここに$('.classOfImage')

<img src="/images/firstimage.pmg" alt="My Image" class="classOfImage" /> 

を使用するクラスを持っている必要があります

あなたはこれをあなたの現在のコードに統合するためにこうすることができます：

var panel = false; 

この変数をクリック関数外に定義し、falseに設定します。

今すぐ機能をクリックして、あなたにこれを追加します。

if(!panel){ 
    $('.classOfImage').attr('src','/images/secondimage.png'); 
    panel = true; 
} else if(panel) { 
    $('.classOfImage').attr('src','/images/firstimage.png'); 
    panel = false; 
} 

私はあなたがこのようにそれを使用することができslideと呼ばれる、あなたはすでにこのようなパネルの状態を保存し、変数を持って見ることができるとおり：

$(function() { 
    var slide = false; 
    var height = $('#footer_content').height(); 

    $('#footer_button').click(function() { 

    var docHeight = $(document).height(); 
    var windowHeight = $(window).height(); 
    var scrollPos = docHeight - windowHeight + height; 

    $('#footer_content').animate({ height: "toggle"}, 1000); 

    if(!slide) { 

     $('.classOfImage').attr('src','/images/secondimage.png'); // LOOK HERE !! 

     if($.browser.opera) { 
      $('html').animate({scrollTop: scrollPos+'px'}, 1000); 
     } else { 
      $('html, body').animate({scrollTop: scrollPos+'px'}, 1000); 
     } 
      slide = true; 

    } else { 

     $('.classOfImage').attr('src','/images/firstimage.png'); // AND HERE !! 

      slide = false; 
    } 

    }); 
}); 

を

注：jQuery(function($) {はif(!slide)

同じである $(function() {と if(slide == false)と同じです