2012-06-22 5 views
0

숨바꼭질들 DIV 슬라이딩! jquery를 사용하여 슬라이딩 div (왼쪽에서 오른쪽)를 만들어야합니다. 이 잘 작동하지만 난 사업부는 이미 오른쪽으로 이동 한 후 화살표 이미지를 클릭 왼쪽 슬라이드에 만드는 방법을 알고하지 않습니다 http://www.k-prim.biz/test/test.html : 이것은 내가이 순간에 무슨에 대한 링크입니다. 어떤 도움이 필요합니까?는 jQuery로

감사

+0

CSS3 애니메이션을 사용 하시겠습니까? 아니면 IE에서도 작동하도록할까요? – fcalderan

답변

2

단순히 대신 스크립트 측의이 코드를보십시오.

$(function(){ 
     var i = 0; 
     $("#clicky").click(function(){ 
     if(i==0){ 
      i =1; 
      $("#slide").animate({marginLeft:'500px'},'slow', function(){ 
       $("img#clicky").attr("src", "right.jpg"); 
      }); 
     }else{ 
      i=0; 
      $("#slide").animate({marginLeft:'0px'},'slow', function(){ 
      $("img#clicky").attr("src", "left.jpg"); 
      }); 
     } 
    }); 

});

0
<script> 
var pos=0; 
$(function(){ 
    $("#clicky").click(function(){ 
       if(pos==0) 
       { 
        $("#slide").animate({marginLeft:'500px'},'slow', function(){ 
           $("img#clicky").attr("src", "right.jpg"); 
        }); 
        pos = 1; 
       } 
       else 
       { 
        $("#slide").animate({marginLeft:'0px'},'slow', function(){ 
           $("img#clicky").attr("src", "left.jpg"); 
        }); 
        pos = 0; 
       } 
    });    
}); 
</script> 

이 알고리즘에 생각에서 당신을 도움이 될 수 있습니다.

주의 사항 :, 코드를 테스트 편집하지 않습니다.

+0

당신은 또한'pos'의 값을 업데이트해야합니다. 그렇지 않으면 항상'0'이됩니다. – fcalderan

+0

확실한, 잊어 버렸습니다. 고마워요 :) – totten

+0

예 !!!! 완벽하게 작동합니다! 고마워요 !!! –

1

대안 CSS 전환을 사용하여 CSS-방법이 될 수 있습니다. See jsfiddle. (화살표 이미지가 이제 배경, jsfiddle가 적절하게 조정되어 있기 때문에, div#slide편집 클릭 핸들러)

경우에 클릭 핸들은 간단하다 : JQuery와의

$("#slide").click(function(){ 
    var el= $(this) 
     ,isRight = /right/i.test(el.attr('class')) 
     ,addremove = isRight ? 'removeClass' : 'addClass'; 
    el[addremove]('right'); 
});​ 
+0

이 작품도 완벽 !!! 고마워요! 당신은 훌륭합니다! –

0

매우 간단한 사용 다음과 같습니다

<script src="jquery.min.js"></script> 
<script src="jquery-ui.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function() { 
      $("#left_panel").toggle("slide", { direction: "left" }, 1000); 
    }); 
}); 
</script>