JQuery show div в течение нескольких минут

Здравствуйте, у меня есть несколько div, которые разделены разными идентификаторами, и у меня есть дайвер, названный show_ads. Теперь я хочу показать это объявление div на текущем активном div через 3 минуты на один раз всего за 10 секунд, чтобы показать мое объявление, и это автоматически закрывает этот show_ads ДИВ

вот мой код:

<div id="main_1">
//content here for 1
</div>

<div id="main_2">
//content here for 2
</div>

<div id="main_3">
//content here for 3
</div>

<div id="main_4">
// content here for 4
</div>



<div id="show_ads">
// ad code here
</div>

например, если кто-то нажал на div main_2, то это означает, что main_2 div активируется теперь через 3 минуты show_ad div появится только один раз только на 10 секунд и автоматически закрывается

то снова один и тот же пользователь нажимает на main_3, тот же процесс снова активируется

3 ответа

Возможно, вам это поможет: http://jsfiddle.net/gd217fgo/

Html:

<div id="main_1">
 div 1
</div>

<div id="show">
 ad here
</div>

JavaScript:

$(function() {
 $("#show").hide();
 $("#main_1").click( function(){
 setTimeout(function(){
 $("#show").show();
 setTimeout(function() {
 $("#show").hide()
 }, 5000);
 }, 3000);
 });
});


Дайте вашим основным divs общий класс, чтобы вы могли легко выбрать их все вместе, например:

<div id="main_1">

 <p> Затем вы можете привязать клик к ним следующим образом:</p> <pre class="prettyprint linenums">$(document).ready(function() {
 $("#show").hide(); // hide the ad to start
 $(".main").click(function() { // on click of any main div
 $("#show").stop(true,true) // stop any previous animation
 .hide() // hide the ad
 .appendTo(this) // move the ad to the clicked div
 .delay(180000) // wait 3 minutes before next animation step
 .fadeIn(10) // fade the ad in
 .delay(10000) // then wait 10 seconds
 .fadeOut(100); // hide the ad
 });
});

Обратите внимание, что когда вы добавляете (или .appendTo()) элемент, который уже существует, элемент перемещается, а не копируется. Полное объяснение всех методов, которые я использовал, можно найти на сайте API jQuery.

Демо: http://jsfiddle.net/181b4zf7/


Ваш html:

<div id="main_1">
 <div>
 <h2>Lorem ipsum</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh nisi, scelerisque eget ultrices ut, euismod id justo. Vivamus vitae nibh pellentesque, consequat metus ut, rhoncus enim. Curabitur blandit sem sed diam pretium, nec mattis erat hendrerit. Maecenas a magna erat. Morbi in turpis eget orci suscipit dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris turpis augue, sollicitudin at odio non, fermentum imperdiet augue. In hac habitasse platea dictumst. Maecenas rutrum ante ipsum, sit amet euismod risus dapibus ut. Praesent eget magna vel nisi vehicula vestibulum. Quisque nec nunc pulvinar, blandit magna at, hendrerit nibh. Sed mattis massa a massa lacinia venenatis. Donec non erat justo.</p>
</div>
 <div>Read more</div>
</div>
<div id="main_2">
//content here for 2
</div>

<div id="main_3">
//content here for 3
</div>

<div id="show_ads">
 <center>Ads here</center>
</div>

Ваш css:

#main_1 {
 background-color: #F1F1F1;
}
.content {
 width: 500px;
 height: 200px;
 overflow: hidden;
}
.read-more a {
 cursor: pointer;
 line-height: 50px;
 padding: 10px;
 background-color: red;
}
#show_ads {
 width: 500px;
 height: 200px;
 background: rgba(0,0,0,.3);
 position: absolute;
 top: 10px;
 display: none;
}

JQuery:

(function( $ ){
 $.fn.readMore = function() {
 $("#show_ads").show();
 window.setInterval(function(){
 $("#show_ads").hide();
 $(".content").height(500);
 $(".read-more").hide();
 }, 5000);
 };
})( jQuery );

Посмотрите это в JsFiddle: http://jsfiddle.net/cp5rayo1/

Чтобы выбрать Id в jQuery, который начинается с определенного имени, используйте это:

$('div[id^="id_here"]')

licensed under cc by-sa 3.0 with attribution.