왼쪽에서 오른쪽으로 jQuery 이상으로 요소를 이동하십시오.

Question

슬라이드 쇼에서 div를 이동하는 데 사용하고 있습니다. 문제는 각 이미지의 캡션이 동일한 위치 (각 div)에서 시작하여 각 이미지에서 왼쪽에서 오른쪽으로 이동해야한다는 것입니다. 이 코드를 사용하면 div가 원하는대로 움직이지만 다음 코드는 마지막 코드가 있던 지점에서 움직입니다.

$("#elementId").animate({ 
     marginLeft: "-=100" 
    }, 1000, function() { 
     //Complete 
    } 
); 

그냥 경우에 나는 열심히 설명 만들고있어.

슬라이드 쇼가 있습니다. 각 이미지가 페이드 인됩니다. 나중에 각 이미지 상단에 일부 텍스트가 표시되는 div가 있고, div는 왼쪽에서 오른쪽으로 이동해야합니다. 위의 코드를 사용하면 div가 움직이지만 다음 이미지가 사라지 자마자 div가 이전 div가 있던 마지막 위치에서부터 이동합니다.

0 또는 원래 위치에서 div를 "이동"할 수 있습니까?

편집 코드 요청 :

<script type="text/javascript"> 
    // Speed of the automatic slideshow 
    var slideshowSpeed = 6000; 

    // Variable to store the images we need to set as background 
    // which also includes some text and url's. 


    var photos = [ { 
      "title" : "First Tag line :", 
      "image" : "/images/chrysanthemum-266x200.jpg", 
      "url" : "http://www.gyms-ireland.com", 
      "firstline" : "First Tag line :", 
      "secondline" : "Second Tag line" 
     }, { 
      "title" : "Some text", 
      "image" : "/images/tulips-oop-ll-266x200.jpg", 
      "url" : "http://www.gyms-ireland.com", 
      "firstline" : "Some text", 
      "secondline" : "Alternative text" 
     }, { 
      "title" : "Npthing Here", 
      "image" : "/images/koala-266x200.jpg", 
      "url" : "http://www.gyms-ireland.com", 
      "firstline" : "Npthing Here", 
      "secondline" : "Also nothing here", 
     }, { 
      "title" : "Office Appartments", 
      "image" : "/images/work.jpg", 
      "url" : "http://www.sxc.hu/photo/1265695", 
      "firstline" : "Or still busy at", 
      "secondline" : "work?" 
     } 
    ]; 

    jQuery(document).ready(function() { 

     // Backwards navigation 
     jQuery("#back").click(function() { 
      stopAnimation(); 
      navigate("back"); 
     }); 

     // Forward navigation 
     jQuery("#next").click(function() { 
      stopAnimation(); 
      navigate("next"); 
     }); 

     var interval; 
     jQuery("#control").toggle(function(){ 
      stopAnimation(); 
     }, function() { 
      // Change the background image to "pause" 
      jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" }); 

      // Show the next image 
      navigate("next"); 

      // Start playing the animation 
      interval = setInterval(function() { 
       navigate("next"); 
      }, slideshowSpeed); 
     }); 


     var activeContainer = 1;  
     var currentImg = 0; 
     var animating = false; 
     var navigate = function(direction) { 
      // Check if no animation is running. If it is, prevent the action 
      if(animating) { 
       return; 
      } 

      // Check which current image we need to show 
      if(direction == "next") { 
       currentImg++; 
       if(currentImg == photos.length + 1) { 
        currentImg = 1; 
       } 
      } else { 
       currentImg--; 
       if(currentImg == 0) { 
        currentImg = photos.length; 
       } 
      } 

      // Check which container we need to use 
      var currentContainer = activeContainer; 
      if(activeContainer == 1) { 
       activeContainer = 2; 
      } else { 
       activeContainer = 1; 
      } 

      showImage(photos[currentImg - 1], currentContainer, activeContainer); 

     }; 

     var currentZindex = -1; 
     var showImage = function(photoObject, currentContainer, activeContainer) { 
      animating = true; 

      // Make sure the new container is always on the background 
      currentZindex--; 

      // Set the background image of the new active container 
      jQuery("#headerimg" + activeContainer).css({ 
       "background-image" : "url(" + photoObject.image + ")", 
       "display" : "block", 
       "z-index" : currentZindex 
      }); 

      // Hide the header text 
      jQuery("#headertxt").css({"display" : "none"}); 

      // Set the new header text 
      jQuery("#firstline").html(photoObject.firstline); 
jQuery("#firstline").css("marginLeft", "0").animate({ 
     marginLeft: "-=100" 
    }, 4000, function() { 
     //Complete 
    } 
); 
      jQuery("#secondline") 
       .attr("href", photoObject.url) 
       .html(photoObject.secondline); 
      jQuery("#pictureduri") 
       .attr("href", photoObject.url) 
       .html(photoObject.title); 


      // Fade out the current container 
      // and display the header text when animation is complete 
      jQuery("#headerimg" + currentContainer).fadeOut(function() { 
       setTimeout(function() { 
        jQuery("#headertxt").css({"display" : "block"}); 
        animating = false; 
       }, 500); 
      }); 
     }; 

     var stopAnimation = function() { 
      // Change the background image to "play" 
      jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" }); 

      // Clear the interval 
      clearInterval(interval); 
     }; 

     // We should statically set the first image 
     navigate("next"); 

     // Start playing the animation 
     interval = setInterval(function() { 
      navigate("next"); 
     }, slideshowSpeed); 

    });</script> 

HTML

<div id="headerimgs"> 
    <div id="headerimg1" class="headerimg"></div> 
    <div id="headerimg2" class="headerimg"></div> 
</div> 

<!-- Slideshow controls --> 

<!-- jQuery handles for the text displayed on top of the images --> 
<div id="headertxt"> 
    <p class="caption"> 
     <span id="firstline"></span> 
     <a href="#" id="secondline"></a> 
    </p> 
    <p class="pictured"> 
     Pictured: 
     <a href="#" id="pictureduri"></a> 
    </p> 
</div> 

CSS

#header { 
    height: 220px; 
    width: 520px; 
} 
.headerimg { 
    background-position: center top; 
    background-repeat: no-repeat; 
    height: 220px; 
    position: absolute; 
    width: 520px; 
} 

#headertxt { 
    clear: both; 
    margin: 0 auto; 
    position: relative; 
    top: 50px; 
    width: 520px; 
} 
#firstline { 
    color: #333333; 
    display: block; 
    float: left; 
    font-size: 25px; 
    margin: 10px 10px 0 0; 
    padding: 10px; 
    marginLeft:0px !important; 
} 
#secondline { 
    clear: both; 
    color: #CD2B3A; 
    display: block; 
    float: left; 
    font-size: 40px; 
    margin: 10px 30px 0; 
    padding: 15px 10px; 
    text-decoration: none; 
} 
#headerimgs a { 
    text-indent: -999999px; 
} 

.new { 
    display: block; 
    height: 220px; 
    position: absolute; 
    width: 520px; 
} 
#secondline:hover { text-decoration:underline; color:#7F000C; } 

.pictured { 
    background-color: #CC3333; 
    clear: both; 
    color: #FFFFFF; 
    display: block; 
    float: right; 
    font-size: 12px; 
    margin-top: 10px; 
    padding: 9px 16px; 
} 

Answer 1

질문에 대해 이야기하기는 어렵지만 동일한 div을 다시 사용하는 경우 marginLeft을 재설정해야합니다. 예 :

$("#elementId").css("marginLeft", "0").animate({ 
     marginLeft: "-=100" 
    }, 1000, function() { 
     //Complete 
    } 
); 

또한 애니메이션이 완료되기 전에이 전화 경우가에 stop가 발생 할 수 있습니다. (시작점이 0 안 경우 물론, 10px 또는 무엇이든 사용), 그러나 그것은 나머지 코드가하는 일에 달려 있습니다.

Live example | source :

HTML :

<div id="elementId">I'm the div</div> 
<button id="theButton">Click me</button> 

자바 스크립트 :

jQuery(function($) { 

    $("#theButton").click(function() { 
    $("#elementId").stop().css("marginLeft", "0").animate({ 
      marginLeft: "-=100" 
     }, 1000, function() { 
      //Complete 
      display("Done, click the button again to see the repeat"); 
     } 
    ); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 

}); 

Answer 2

OK, 난이 해결되었습니다,하지만 난 jQuery Cycle 플러그인을 사용했을 거라고 볼 수 있습니다; 훨씬 더 간단합니다. my website에서 작동중인 것을 볼 수 있습니다.