在jQuery中的replaceWith上添加SlideUp和Slidedown動畫

Question

我正在制作一個應用展示網站。 我有一個全角垂直幻燈片的頁面。 我在屏幕上添加了固定電話。 當用戶使用按鈕滑動圖像時，我想在手機上添加圖像。

當他按下按鈕時，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>

我將.slides的寬度和高度設為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");
                });

            }                       
            } 

如您所見，我能夠以淡入淡出和fadeIn方式使手機圖像改變效果。 有人可以告訴我如何以下滑和下滑的方式進行操作嗎？

Answer 1

您可以從jQuery UI使用幻燈片效果。

在這里，您具有效果的工作示例 ：在選擇中選擇幻燈片並運行，然后單擊“運行效果”。

您可以修改的影響的方向和距離，作為記錄在這里 。

Answer 2

不太明白你的意思。 我無法添加評論，所以只在這里寫。
如果您要表示要單擊一個按鈕，然后單擊DIV幻燈片。 您可以像使用animate.css一樣使用CSS animate

首先讓您要滑動的div位置：絕對頂部：100％；
和你想要的div SlideOut position：absolute top：0;

然后，當您單擊按鈕時，將CSS動畫類添加到slideIn Div使其top：0，slideOut div top：-100％; 它將起作用，您還可以添加其他動畫，例如更改其不透明度。

在此處使用CSS動畫可以很容易地使用css 動畫