在jQuery中的replaceWith上添加SlideUp和slidedown动画答案

【问题标题】：Adding SlideUp and slidedown animation on replaceWith in jQuery在jQuery中的replaceWith上添加SlideUp和slidedown动画
【发布时间】：2016-01-16 16:04:06
【问题描述】：

我正在制作一个应用展示网站。我有一个带有全宽垂直幻灯片的页面。我在屏幕上添加了一部固定电话。当用户使用按钮滑动手机时，我想在手机上添加一张图片。

当他按下按钮时，jquery 从手机中删除当前图像并以滑动方式添加新图像。我找到了关于 codyhouse https://codyhouse.co/demo/app-introduction-template/index.html#cd-product-tour 的教程。

这是一个很好的教程，但无法以垂直方式完成。我的幻灯片代码是这样的

    <div id="allslides">
        <div  id="1" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active  '>   
            <h1>My Appp</h1>
            <p class='content'>Some content</p>         
        </div>
       <div  id="2" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active  '>    
            <h1>My Appp</h1>
            <p class='content'>Some content</p>         
        </div>
<div  id="3" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active  '>   
            <h1>My Appp</h1>
            <p class='content'>Some content</p>         
        </div>
<div  id="4" class="slides" phone_image='its the url of the image going to be added on the phone when the slide is active  '>   
            <h1>My Appp</h1>
            <p class='content'>Some content</p>         
        </div>
    </div>

我将 .slide 的宽度和高度设为 100%。滑块运行良好，手机完美固定在屏幕上。但我希望手机图像在每张幻灯片上都发生变化，它的效果应该与链接上的相同，但采用垂直方式。

我的导航按钮代码是这样的

<div id="navigation">
                <ul>
<li><a href="#" class="bullets" id="bullet1" onclick="slider(1)"></a></li>
<li><a href="#" class="bullets" id="bullet2" onclick="slider(2)"></a></li>
<li><a href="#" class="bullets" id="bullet3" onclick="slider(3)"></a></li>
<li><a href="#" class="bullets" id="bullet4" onclick="slider(4)"></a></li>
                </ul>
    </div>

html的电话是这个

 <div class="phone">
            <div class="cd-image-container">
                <div>
                    <div class="cd-phone-frame"></div>
                    <div class="cd-image-wrapper">

                    </div>
                </div>
            </div> 
            </div>

我使用的jQuery是这个

$(document).ready(function(){
$(".bullets").first().addClass('activeBullet');

            var image = $("#1").attr('phone_image');
            $('.cd-image-wrapper').prepend('<img src="'+image+'"data-video="video/video-2" alt="Screen Preview 2">');
            setTimeout(function(){
                $('.cd-image-wrapper img').slideDown("fast");
            },1);
});

The slider function is this 

function slider(n){

var ID = $(".activeDiv").attr("id");
            var sid= ID.split("slide"); 
            var new_id = sid[1];

            if(new_id == n){

            }else{


                $(".slides").removeClass('activeDiv');
                $("#slide"+n).addClass('activeDiv');

                var top = $("#slide"+n).position().top;

                $("#mainbar").css({'top':-top});

                $(".bullets").removeClass('activeBullet');
                $("#bullet"+n).addClass('activeBullet');        $('.cd-image-wrapper img').fadeOut("slow", function(){
                    var images = $("#"+id).attr('phone_image');
                    var div = $('<img src="'+images+'"data-video="video/video-2" alt="Screen Preview 2">').hide();
                    $(this).replaceWith(div);
                    $('.cd-image-wrapper img').fadeIn("slow");
                });

            }                       
            }

如您所见，我能够以淡出和淡入方式制作手机图像更改效果。任何人都可以告诉我如何以向下滑动和向上滑动的方式进行操作？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

不太明白你的意思。我无法添加评论，所以只写在这里。
如果你的意思是你想点击一个按钮和DIV幻灯片。你可以像animate.css一样使用css animate

首先让你想要的divslideIn position:absolute top:100%;
和你想要的divslideOut position:absolute top:0;

然后当您单击按钮时，将 css 动画类添加到 slideIn div 使其顶部：0，slideOut div 顶部：-100%;它会起作用，你也可以添加其他动画，比如改变它的不透明度。

在这里 Using CSS animations使用css动画会很容易

【讨论】：

【解决方案2】：

您可以在 jQuery UI 中使用幻灯片效果。

这里有一个working sample of the effect：在选择中选择幻灯片并运行，然后点击“运行效果”。

可以修改效果的方向和距离，如documented here。

【讨论】：