Question

目前主要使用php进行网站工作，当谈到javascript jquery时，我真的知之甚少。我确实有一些工作，我按下一个按钮，我淡入一个div。但它突然移动它下面的div ..有没有办法，我可以在淡入之前滑下它下面的div？继承了我当前的代码..以及该页面的链接。点击发送消息即可开始淡入淡出。

http://www.mxbempire.com/?page=rider&riderid=17&id=1#

$(document).ready(function(){   
    $('#composemsg').hide();

    $('.msgdwn').click(function(){
        $('#composemsg').fadeToggle("slow");
    });

    $('.msgdwn').click(function(e){
        e.stopPropagation();
    });

});

和divs

<div class="lowerhalf">

    <div class="card2" id="composemsg">
        <div class="heading">Send Message to <?php echo $ridertag ?></div>
        <textarea name="message" id="compose"></textarea>
        <input type="submit" id="message" value="Send PM" />
    </div>
    </form>
    <div class="card2">
        <div class="heading">Wall Comments</div>

    </div>
    <div class="card2">
        <div class="heading">Screenshots</div>
    </div>
    <div class="card2">
        <div class="heading">Statistics</div>
    </div>
</div>

Answer 1

这可能就是你要找的东西。

$(function(){

    $('.msgdwn').click(function(){
        $('#composemsg').slideDown(500, function(){
            $('#composemsg').animate({ opacity : 1 }, 1000);
        });
    });    

});

此外还有一些像这样的CSS：

.composemsg {
  display: none;
  opacity: 0;
}

在此处查看示例： http://jsfiddle.net/Cp6mx/

Answer 2

首先，你想把2个点击处理程序加入到一个函数中......没有必要在这里有2个不同

$('.msgdwn').click(function(){
   e.stopPropagation();
   $('#composemsg').fadeToggle("slow");
});

然后我不确定你想做什么...标题说幻灯片，但你没有在你的问题中指明它......所以假设你想要滑出盒子（这使得没有多大意义，因为如果你先将它滑出来然后淡出它就没有人能看到淡出了......）

但是只是为了解释你在标题中提到的内容...如果你想在另一个动作完成后执行一个动作，你只需要使用一个回调函数，这对jQuery很容易例如

$('#composemsg').fadeToggle("slow",function(){
   alert('now disappeared');
});

or 
$('#composemsg').slideToggle("slow",function(){
   $(this).fadeToggle("slow");  // This now referring to the object the first function was attached to
});

如果你想同时做两件事，你可以使用animate同时同时使用两者：

$('#composemsg').animate({
  height: "toggle",
  opacity: "toggle"
});

在fadetoggle之前滑动div

2 个答案: