Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2012, 12:27
Новичок на форуме
Отправить личное сообщение для devictor Посмотреть профиль Найти все сообщения от devictor
 
Регистрация: 21.02.2012
Сообщений: 4

Помогите с анимацией
Пишу кодик
хотелось бы чтобы было все плавно и красиво
просто сменить фон без проблем
$(function() {
$(".ur-im > img").click(function() {
$(".ur-im-b").css('backgroundImage', 'url(images/lessons/bib/'+this.alt+')');
});
});

но хотелось бы чтобы он плавно пропал и появился новый.
пробую так:
$(function() {
$(".ur-im > img").click(function() {
var tmp = this.alt;
$(".ur-im-b").animate({opacity:0},1000,function () { 
$(".ur-im-b").css('backgroundImage', 'url(images/lessons/bib/'+tmp+')');
}).animate({opacity:1},1000); //показываем снова
});
});


меняет только без плавного перехода просто ждет секунду, а потом меняет фон.

HTML код:
<div class="ur-im">
<img src="images/lessons/bib/01_s.jpg" alt="01_b.jpg" />
<img src="images/lessons/bib/02_s.jpg" alt="02_b.jpg" />
<img src="images/lessons/bib/03_s.jpg" alt="03_b.jpg" />
<img src="images/lessons/bib/04_s.jpg" alt="04_b.jpg" />
<div class="ur-im-b"></div>
</div>

помогите кто чем может.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2012, 12:36
Кандидат Javascript-наук
Отправить личное сообщение для Beriagts Посмотреть профиль Найти все сообщения от Beriagts
 
Регистрация: 31.07.2011
Сообщений: 118

var tmp = $(this).attr("alt")
луче засунуть в rel или data-url
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2012, 14:15
Новичок на форуме
Отправить личное сообщение для devictor Посмотреть профиль Найти все сообщения от devictor
 
Регистрация: 21.02.2012
Сообщений: 4

Сообщение от Beriagts Посмотреть сообщение
var tmp = $(this).attr("alt")
луче засунуть в rel или data-url
Нет так тоже не пашет, тут видать в принципе что-то другое надо.
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2012, 14:31
Интересующийся
Отправить личное сообщение для dimon888951 Посмотреть профиль Найти все сообщения от dimon888951
 
Регистрация: 09.02.2012
Сообщений: 24

Сообщение от devictor Посмотреть сообщение
Пишу кодик
хотелось бы чтобы было все плавно и красиво
просто сменить фон без проблем
$(function() {
$(".ur-im > img").click(function() {
$(".ur-im-b").css('backgroundImage', 'url(images/lessons/bib/'+this.alt+')');
});
});

но хотелось бы чтобы он плавно пропал и появился новый.
пробую так:
$(function() {
$(".ur-im > img").click(function() {
var tmp = this.alt;
$(".ur-im-b").animate({opacity:0},1000,function () { 
$(".ur-im-b").css('backgroundImage', 'url(images/lessons/bib/'+tmp+')');
}).animate({opacity:1},1000); //показываем снова
});
});


меняет только без плавного перехода просто ждет секунду, а потом меняет фон.

HTML код:
<div class="ur-im">
<img src="images/lessons/bib/01_s.jpg" alt="01_b.jpg" />
<img src="images/lessons/bib/02_s.jpg" alt="02_b.jpg" />
<img src="images/lessons/bib/03_s.jpg" alt="03_b.jpg" />
<img src="images/lessons/bib/04_s.jpg" alt="04_b.jpg" />
<div class="ur-im-b"></div>
</div>

помогите кто чем может.
ну здесь логически. как бы не то,Вы берете картинку у которой изначально параметр opacity 1 и опятьже анимируете её до 1.Наверное нужно сначала задать прозрачность,потом изменить.Прописать для нее css например,как вариант.
Или подложить одну картинку под другую,затем у первой увеличивать прозрачность,тоже как вариант.Да способов воплощения, можно много придумать)

Последний раз редактировалось dimon888951, 21.02.2012 в 14:34.
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2012, 15:12
Новичок на форуме
Отправить личное сообщение для devictor Посмотреть профиль Найти все сообщения от devictor
 
Регистрация: 21.02.2012
Сообщений: 4

Сообщение от nasqad Посмотреть сообщение
$("img").fadeOut("slow", function(){
    $(this).css('backgroundImage', 'url(images/lessons/bib/'+tmp+')').fadeIn("slow");
})
0;
и как это в моем случае поможет хотелось бы полный вариант увидеть.
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2012, 15:13
Новичок на форуме
Отправить личное сообщение для devictor Посмотреть профиль Найти все сообщения от devictor
 
Регистрация: 21.02.2012
Сообщений: 4

Сообщение от dimon888951 Посмотреть сообщение
ну здесь логически. как бы не то,Вы берете картинку у которой изначально параметр opacity 1 и опятьже анимируете её до 1.Наверное нужно сначала задать прозрачность,потом изменить.Прописать для нее css например,как вариант.
Или подложить одну картинку под другую,затем у первой увеличивать прозрачность,тоже как вариант.Да способов воплощения, можно много придумать)
Так весь вопрос тут и в том как это сделать сначала потушить потом попенять поле показать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с replace! faforty Общие вопросы Javascript 2 28.08.2011 13:10
Помогите с простейшей анимацией zorky10 AJAX и COMET 5 04.01.2011 16:20
ПОМОГИТЕ с установкой 2 javascript- ов Рашид Общие вопросы Javascript 3 17.11.2010 16:19
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Помогите оптимизировать скрипт смены изображений с анимацией Khmelevsky Элементы интерфейса 5 06.03.2010 19:02