JQuery изображение размытия эффект с в div?

Рассмотрим я есть three images и one bannerDiv .... На начальной загрузки страницы я должен показать первое изображение и после того, как sometimeout сказать 300ms я должен показать второе изображение и наоборот .... я должен blur первое изображение и шоу второе изображение .... Любое предложение, как это можно сделать с помощью JQuery ...JQuery изображение размытия эффект с в div?

и моя функция JQuery есть

<script type="text/javascript"> 

     $(document).ready(function() { 
    //how to show first image and blur it to show second image after 300 ms 
      }); 
</script>

EDIT:

первое изображение выцветает после 300ms и показать 2-й изображение
2-ое изображение исчезать после 300ms и показать 3rd изображение
3rd изображение исчезать после 300ms и показать изображение 1-й ....

Второй EDIT:

Я ника, но ничего не происходит ..

<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div Id="BannerDiv"> 
      <img src="Images/banner3.jpg" alt="image1" width="954" height="327"/> 
      <img src="Images/ban_main_25.jpg" alt="image2" width="954" height="327"/> 
      <img src="Images/banner_25.jpg" alt="image3" width="954" height="327"/> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      $('#BannerDiv > :first').show(); 
      setTimeout(rotate, 1000); 
     }); 

     function rotate() { 
      var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() { 
       setTimeout(rotate, 300); 
      }).next().css({ 'z-index': 1 }).show(); 
      if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show(); 
     } 
    </script> 
    </form> 
</body>

и CSS

#BannerDiv {width: 954px; height: 327px;} 
#BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}

источник

2010-04-05 bala3569

Что вы имеете в виду под «размытием»? –

Эффекты @Nick fadein и fadeout – bala3569

Почему у вас есть изображения, прокомментированные? '<% -' CSS является '#BannerDiv img', а не div (как в моем ответе) для вашего использования :) –

Вот быстрый способ сделать это:

$(function() { 
    $('#BannerDiv > :first').show(); 
    setTimeout(rotate, 1000); 
}); 

function rotate() { 
    var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() { 
    setTimeout(rotate, 3000); 
    }).next().css({ 'z-index': 1 }).show(); 
    if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show(); 
}

Вам потребуется следующий CSS, чтобы соответствовать (настроить размеры с вашими):

#BannerDiv {width: 400px; height: 200px;} 
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}

Here's an example using colored divs, it would be the exact same when replaced with images like you want.

источник

2010-04-05 11:58:22

@ Не обращайте внимания на мое второе редактирование ... Нет ошибок, но все еще пустая страница ... – bala3569

@ Ник еще три изображения отображаются на начальной загрузке страницы ... – bala3569

@ bala3569 - С CSS #BannerDiv img', который не должно быть, у вас есть ссылка на вашу страницу? –

Вы можете использовать setInterval() для повторного таймерной действия:

$(function() { 
    setInterval(300, cycle_images); 
}); 

function cycle_images() { 
    var banner = $("#BannerDiv"); 
    if (banner.is(":hidden")) { 
    banner.children().hide().end().show(); 
    } 
    var images = banner.children("img"); 
    var visible = images.filter(":visible"); 
    var index = images.index(visible); 
    var next = (index + 1) % images.length; 
    visible.fadeOut(100, function() { 
    images[next].fadeIn(100); 
    }); 
}

Что касается того, чтобы скрыть баннер и/или изображения с помощью CSS (внешний или встроенный), мое личное мнение что это вообще лучше сделать так, потому что, если вы этого не сделаете, это может привести к заметному мерцанию, если событие ready() задерживается по любой причине.

источник

2010-04-05 11:22:13 cletus

@cletus см. Мое редактирование .. Должен ли я сделать свой div видимым, прежде чем делать это. – bala3569

@cletus, что параметр 'cycle_images' принимает для функции setInterval ... – bala3569

@cletus i llet вы знаете, как только я получу эффект. ... – bala3569

(function($){ 
$.fn.showdelay = function(){ 
    var delay = 0; 
    return this.each(function(){ 
     $(this).delay(delay).fadeIn(100); 
     delay += 300; 
    }); 
}; 
})(jQuery);

Использование: $("#BannerDiv").children().showdelay();

может быть, чуть более элегантно.

источник

2010-04-05 11:30:00 jAndy

Он только циклически проходит все элементы один раз. – CodeJoust

JQuery изображение размытия эффект с в div?

ответ

Смежные вопросы