追加與幻燈片效果的div

我試圖追加與幻燈片效果使用CSS的新div。我找到了一種使用關鍵幀的方法，但我確信有更簡單的方法來實現這一點。另外，我想將我的新div放在其他div旁邊，而不是按鈕，但我也有問題。如果任何人都可以幫助我，這將是值得讚賞的。追加與幻燈片效果的div

$('div:first-child').click(function() { 
 
    if ($(this).hasClass('active')) { 
 
    $(this).removeClass('active'); 
 
    } else { 
 
    $(this).addClass('active'); 
 
    } 
 
}); 
 

 
$('button').click(function() { 
 
    $('body').append('<div class="slide">7</div>'); 
 
});

div { 
 
    display: inline-block; 
 
} 
 
button { 
 
    position: relative; 
 
} 
 
.active { 
 
    font-size: 25px; 
 
} 
 
div:nth-child(2):active { 
 
    -ms-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -webkit-transition: -webkit-transform 2s; 
 
    transform: rotate(360deg); 
 
    transition: transform 2s; 
 
} 
 
.slide { 
 
    position: absolute; 
 
    animation-duration: 3s; 
 
    animation-name: slidein; 
 
} 
 
@keyframes slidein { 
 
    from { 
 
    margin-left: 100%; 
 
    } 
 
    to { 
 
    margin-left: 0%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</body> 
 
<button>button</button>

同樣，我試圖避免使用關鍵幀的事情，因爲我不太明白，而想要用更簡單的方式來實現這一目標。

感謝先進！

來源

2016-11-30 ckim16

我認爲你需要的是jQuery UI。除此之外還有一些很棒的滑動效果。

http://api.jqueryui.com/effect/

希望這有助於

來源

2016-11-30 09:48:38 Brad

$('.slides div:first-child').click(function() { 
 
    if ($(this).hasClass('active')) { 
 
    $(this).removeClass('active'); 
 
    } else { 
 
    $(this).addClass('active'); 
 
    } 
 
}); 
 

 
$('button').click(function() { 
 
    var $div = $("<div/>",{"class":"slide","text":"7"}); 
 
    $('.slides').append($div); 
 
    
 
    $div.css({ left : '700px', opacity : 0 }); 
 
    $div.animate({ 
 
     'left' : 0, 
 
     'opacity' : 1 
 
    },1000); 
 

 
});

div { 
 
    display: inline-block; 
 
} 
 
button { 
 
    position: relative; 
 
} 
 
.active { 
 
    font-size: 25px; 
 
} 
 
.slides div:nth-child(2):active { 
 
    -ms-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -webkit-transition: -webkit-transform 2s; 
 
    transform: rotate(360deg); 
 
    transition: transform 2s; 
 
} 
 
.slide { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="slides"> 
 
     <div>1</div> 
 
     <div>2</div> 
 
     <div>3</div> 
 
     <div>4</div> 
 
     <div>5</div> 
 
     <div>6</div> 
 
    </div> 
 
    <button>button</button> 
 
</body>

來源

2016-11-30 10:10:24 Sandeep

看上去很美。謝謝！！ – ckim16

@ ckim16很高興喜歡它:) – Sandeep

追加與幻燈片效果的div

回答

相關問題