Вот смастерил как бы что то подобное плавного эффекта поевления
если нажимать на кнопки с 1 на 2, с 2 на 3, с 3 на 2, с 2 на 1 то все плавно но вот с 1 на 3 и с 3 на 1 плавного эффекта нет(( почему
Кнопки и что выводится:
<style type="text/css">
.pointer { cursor: pointer }
.hidden { display: none }
</style>
<div class="pointer type_1" onclick="Views.changeView(1);res1()">Кнопка-1</div>
<div class="pointer type_2" onclick="Views.changeView(2);res2()">Кнопка-2</div>
<div class="pointer type_3" onclick="Views.changeView(3);res3()">Кнопка-1</div>
<div class="view_1 hidden">Информация 1</div>
<div class="view_2 hidden">Информация 2</div>
<div class="view_3 hidden">Информация 3</div>
Плавное появления))
function res1(){
$(".view_1").fadeIn(1000);
$(".view_2").fadeOut(500);
$(".view_3").fadeOut(500);
}
function res2(){
$(".view_1").fadeOut(500);
$(".view_2").fadeIn(1000);
$(".view_3").fadeOut(500);
}
function res3(){
$(".view_1").fadeOut(500);
$(".view_2").fadeOut(500);
$(".view_3").fadeIn(1000);
}
Куки может быть дело в них?
var Cookie = {
'get': function (name) {
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length, c.length));
}
return null;
},
'set': function (name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}
}
var Views = {
'currentView': function () {
return Cookie.get('view-type') || 1;
},
'changeView': function (view) {
var self = this;
$('.view_' + self.currentView() + ',.view_' + view).toggle();
$('.type_' + self.currentView() + ',.type_' + view).toggle();
Cookie.set('view-type', view, 7);
},
'init': function (self) {
var self = this;
$(function () {
if (self.currentView() == 1) {
$('.type_1,.view_1').toggle();
} else {
self.changeView(self.currentView());
};
});
}
}
Views.init();
