如何在按鈕上滑動Div點擊

我正在試圖製作一個像this這樣的滑動窗體按鈕，我不熟悉JQuery請提出建議。如何在按鈕上滑動Div點擊

的HTML： -

<div id="introFormHome"> 
<form action="" method=""> 
    <div id="slideBox1" class="slideBox"> 
      Conferm Location <input type="text" value="" /> 
      <button class="slideNext">Continue</button> 
    </div> 
    <div id="slideBox2" class="slideBox"> 
      Area <input type="text" value="" /> 
      <button class="slideNext">Continue</button> 
    </div> 
    <div id="slideBox3" class="slideBox"> 
      Email Address <input type="text" value="" /> 
      <button class="slideNext">Continue</button> 
    </div> 
</form>

jQuery的： -

<script type="text/javascript" > 
$('.slideNext').click(function() { 
    $('.slideBox').animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#introFormHome'); 
    }); 
    $(this).next().animate({ 
     left: '50%' 
    }, 500); 
}); 
</script>

的CSS： -

.slideBox { 
    position: absolute; 
    width: 450px; 
    height: 200px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    left: 70%; 
    top: 300px; 
    margin-left: -25%; 
} 
#slideBox1 { 
    background-color: blue; 
} 

#slideBox2 { 
    background-color: yellow; 
    left: 150%; 
} 

#slideBox3 { 
    background-color: red; 
    left: 150%; 
}

那裏的CSS，其工作正常，如果我設置爲單擊div.slideBox {}它幻燈片，但不是與上面張貼的腳本。

來源

2012-07-22 tamal3053

你的嘗試有什麼問題？你有什麼錯誤嗎？ – TheCarver 2012-07-22 06:43:41

它不滑動....如果我們設置整個div滑動比它，但不是與點擊一個按鈕... :( – tamal3053 2012-07-22 06:45:14

好吧，看到我的答案如下 – TheCarver 2012-07-22 06:50:02

-1

我建議均勻地放置所有表單元素，以便您只需每次點擊一次就移動所有內容。這使得你的jQuery代碼更加簡單。使用百分比來定位元素也會使事情變得更加棘手。您可以考慮使用固定像素定位。在這一點上，你的JS可以簡單的

$('.slideNext').click(function() { 
    $('.slideBox').animate({ 
    left: '-=150px' 
    }, 500); 
});

實施的一個例子來看看這個的jsfiddle：http://jsfiddle.net/5aFHk/

我決定用錨標記，而不是按鈕，但無論是正常工作的。

來源

2012-07-22 06:53:10

我沒有jQuery的專家，但我知道，你會想換行jQuery函數中的document.ready，就像這樣：

<script type="text/javascript" > 
$(document).ready(function() { 

    $('.slideNext').click(function() { 
     $('.slideBox').animate({ 
      left: '-50%' 
     }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#introFormHome'); 
    }); 
    $(this).next().animate({ 
     left: '50%' 
    }, 500); 
    }); 

}); 
</script>

來源

2012-07-22 06:48:17 TheCarver

你能後的CSS？只有當div相對或絕對定位時，左邊纔會有效。如果你沒有它已經在你的CSS設置此：

.slideBox{position:absolute}

根據您的佈局，你可能還需要設置：

#introFormHome{position:relative}

像PaparazzoKid說，你也應該換你jQuery在：

$(document).ready(function(){ 
     //jQuery code in here 
})

來源

2012-07-22 06:50:53 Fraser

如何在按鈕上滑動Div點擊

回答

相關問題