如何在按钮上滑动Div [英] How to Slide Div on Button click

问题描述

我正在尝试创建一个滑动表单按钮，例如此，但我不是建议您熟悉JQuery.

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 {}，它可以正常工作，但不能与上面发布的脚本一起使用.

解决方案

我建议将所有表单元素均匀放置，这样您每次单击仅需要移动所有内容一次.这使您的jQuery代码更加简单.使用百分比来定位元素也会使事情变得棘手.您可以考虑改用固定像素定位.那时，您的JS可以很简单

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

有关实现示例，请参见此jsFiddle: http://jsfiddle.net/5aFHk/

我决定使用锚标记而不是按钮，但是两者都可以正常工作.

I am trying to make a sliding form button like this, I am not familiar to JQuery please suggest.

The 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>

The 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>

The 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%;
}

There the css, its working fine if i set to click the div .slideBox{} it slides but not with the above posted script.

解决方案

I recommend positioning all the form elements evenly so that you only need to shift everything once per click. That makes your jQuery code much simpler. Using percentages to position your elements will also make things trickier. You may consider using fixed pixel positioning instead. At that point, your JS can be as simple as

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

See this jsFiddle for an example of implementation: http://jsfiddle.net/5aFHk/

I decided to use anchor tags instead of buttons, but either should work fine.

这篇关于如何在按钮上滑动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！