переключение кнопок
Вот смастерил как бы что то подобное плавного эффекта поевления
если нажимать на кнопки с 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();
|
Пробовал так:
function res1(){
$(".view_1").fadeIn(1000);
$(".view_2").fadeOut(500);
$(".view_3").fadeOut(500);
setCookie('presee', '0', 0, '/')
}
function res2(){
$(".view_1").fadeOut(500);
$(".view_2").fadeIn(1000);
$(".view_3").fadeOut(500);
setCookie('presee', '1', 0, '/')
}
function res3(){
$(".view_1").fadeOut(500);
$(".view_2").fadeOut(500);
$(".view_3").fadeIn(1000);
setCookie('presee', '2', 0, '/')
}
var presee = getCookie("presee")
if (presee=='0') {
$('.view_1').show();
$('.view_1').hide();
$('.view_2').show();
$('.view_2').hide();
$('.view_3').show();
$('.view_3').hide();
}
|
Попробуй так:
<body>
<style type="text/css">
.pointer { cursor: pointer }
.hidden { display: none }
</style>
<div class="pointer type_1" onclick="res('1')">Кнопка-1</div>
<div class="pointer type_2" onclick="res('2')">Кнопка-2</div>
<div class="pointer type_3" onclick="res('3')">Кнопка-3</div>
<div class="view_1 hidden">Информация 1</div>
<div class="view_2 hidden">Информация 2</div>
<div class="view_3 hidden">Информация 3</div>
<script>
function setCookie(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 = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = 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 c.substring(nameEQ.length,c.length);
}
return null;
}
if(getCookie('viev')) {$('.view_'+getCookie('viev')+'').show();$('.type_'+getCookie('viev')+'').hide();}
function res(num){
if(num=='1') {$(".view_1").fadeIn(1000);$('.type_1').fadeOut(500);setCookie('viev','1','365');} else {$(".view_1").fadeOut(500);$('.type_1').fadeIn(500);};
if(num=='2') {$(".view_2").fadeIn(1000);$('.type_2').fadeOut(500);setCookie('viev','2','365');} else {$(".view_2").fadeOut(500);$('.type_2').fadeIn(500);};
if(num=='3') {$(".view_3").fadeIn(1000);$('.type_3').fadeOut(500);setCookie('viev','3','365');} else {$(".view_3").fadeOut(500);$('.type_3').fadeIn(500);};
}
</script>
</body>
|
Спасибо большое Nexus
|
| Часовой пояс GMT +3, время: 00:58. |