在jQuery中的replaceWith上添加SlideUp和sliderown动画 [英] Adding SlideUp and slidedown animation on replaceWith in jQuery

问题描述

我在制作应用程式展示网站。我有一个具有全宽垂直幻灯片的页面。我在屏幕上添加了一个固定电话。

I am making a app showcase site. I have a page with full width vertical slides . I added a fixed phone on the screen. I want to add a image on the phone when the user slide it using button.

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

When he press the button the jquery remove the current image from the phone and add a new image in a sliding manner. I have found a tutorial on codyhouse https://codyhouse.co/demo/app-introduction-template/index.html#cd-product-tour.

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

It's a good tutorial but not able to do it in a vertical way. My code of the slides is this

    <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％。滑块工作得很好，手机固定在屏幕上。但我想要的电话图像在每个幻灯片上改变它的效果应该是相同的在链接，但与垂直的方式。

I give the .slides the width and height 100%. The slider is working great and the phone is fixed on the screen perfectly. But I want the phone image to change on every slide And it effect should be same as on the link but with vertical way.

我的导航按钮代码是

<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是这个

The jQuery that I am using is this

$(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");
                });

            }                       
            } 

使电话图像变化效果以淡出和淡入淡出的方式。

As you can see I am able to make the phone image change effect in fadeout and fadeIn manner. Anyone can tell me how to do it in slidedown and slideup way?

推荐答案

不太明白你的意思。我不能添加评论，所以只需写在这里。

如果你的意思是你想点击一个按钮和DIV幻灯片。
您只需使用css动画，例如 animate.css

Not quite understand what you mean. I can't add a comment so just write here.
If you mean you want click a button and the DIV slide. You can just use css animate like animate.css

首先使div想要slideIn位置：绝对顶部：100％;
和div想要slideOut位置：absolute top：0;

first make the div you want slideIn position:absolute top:100%;
and the div you want slideOut position:absolute top:0;

那么当你点击按钮添加css animate类到slideIn div使它顶部：0，slideOut div顶部：-100％;它会工作，也可以添加其他动画，如更改不透明度。

then when you click button add css animate class to slideIn Div make it top:0, slideOut div top: -100%; It will work and also you can add other animation like change the opacity to it.

这将是很容易使用css animate这里使用CSS动画

It's will be easy to use css animate here the Using CSS animations

这篇关于在jQuery中的replaceWith上添加SlideUp和sliderown动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！