Как да комбинирам hover и click за меню

I

ivan_s

Registered
Здравейте, правя едно меню с помощта на Jquery. Менюто представлява следното: като се зареди страницата се появяват 4-ри снимки, които са прозрачни 50% и са с дължина 320px, но при първоначално стартиране на страницата тези снимки са видими само 65px на дължина. Това, което успявам да направя е като мина с мишката върху тях тяхното opacity става на 100% и се показва снимката в цялата си дължина (320px).Ето и кода който го прави това нещо:
Код: 
		jQuery(function (){
                        jQuery('.box').css("opacity", "0.5");
                        jQuery('.box').hover(function(){
                            jQuery('.box').stop().animate({"width" : "65px"});
                            jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
                        }, function(){

                                jQuery('.box').stop().animate({"opacity" : "0.5", "width" : "130px"});

                           });
                    });

До тук добре, но на мен ми трябва да направя така, че като мина с мишката да изпълнява всичко това, което съм написал, но искам и да мога като кликна върху снимката тя да си остане с opacity 100% и да е с цялата си дължина от 320px. Ефекта който искам почти се получава като в кода горе сменя само "hover" с "click", обаче се губи hover.
Не знам дали сте ме разбрали какво искам. Странно ми е как да комбинирам hover с click без да си пречат. Моля Ви дайте ми съвет. Благодаря
 
Код: 
 jQuery(function (){
                        jQuery('.box').css("opacity", "0.5");
                        jQuery('.box').hover(function(){
                            jQuery('.box').stop().animate({"width" : "65px"});
                            jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
                        },
   jQuery('.box').click(function(){
                            jQuery('.box').stop().animate({"width" : "65px"});
                            jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
                        }
, function(){

                                jQuery('.box').stop().animate({"opacity" : "0.5", "width" : "130px"});

                           });
                    });

Така не става ли?
 
Благодаря ти, за това че веднага се отзова на моето питане. Но за съжаление това нешо е същото както само ако разменя hover с click. Просто не се изпълнява ефекта на hover.
 
Не знам как точно си структуриал менюто, но не можеш ли с CSS да направиш ховер ефекта , а с js да е кликането? С цсс не видам проблем, зависи как е структурата на менюто
 
Да, вярно че с css може да стане hover и с js click-а, но ще стои много дървено. Аз искам като се посочи с мишката върху картинката тя плавно с animate да се появи в цялата си дължина. Не се сещам в кой сайт преди време съм го виждал този трик ама не се сещам къде. Знам, че трябва да може да стане ама като не се сещам за решение ....
 
Не те разбрах добре какво точно искаш да се случва при click и какво да стане с ефекта на hover-a
 
Това, което искам е hover-a да си работи, така както съм го описал в първия си пост.
Проблема ми идва с функцията click. Това, което искам с нея е като кликна върху дадено изображение да прави следното
Код: 
 jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
но искам и функцията hover да се запази, т.е. като мина върху върху някое друго изображение което не съм кликнал тя да си работи.
Не знам дали успях да го обясня, но с няколко думи искам да работят и двете функции click и hover без да си пречат.
 
Не знам аз ли не мога да се изразявам правилно или много ли е сложно това което питам? Няма ли човек от форума да ми подаде едно рамо, че от няколко дни вече се мъча с това. Как да направя така, че hover и click да не си пречат, а да си работят всяка за себе си?
 
До колкото те разбрах нещо такова
Код: 
$(function (){
	$('.box').css("opacity", "0.5");
	$('.box').mouseover(function(ev){
		$(this).stop().animate({"width" : "65px"});
	});
	$('.box').mouseleave(function(){
		$(this).stop().animate({"opacity" : "0.5", "width" : "130px"});

	});
	$('.box').click(function(){
		$(this).stop().animate({"opacity" : "1", "width" : "320px"});
	});
});
 
hpstuff, виждам че разбираш от js, за което евала. Ефекта се получава, но единственото, което не работи е фнкцията click, т.е. като кликна снимката се показва в цялата си дължина от 320, но като махна мишката пак се показва в размер 130px. Искам като се кликне на някоя снимка тя да си стои активна в цял размер, но и да работи hover функцията за некликнатите сникми. Благодаря ти за отделеното време ...
 
Предполагам това трябва да е не те разбрах точно кои евент искаш да премахнеш след клик за това ще ти обясня с в зелето bind e function която закачва евенти (сините) на обекти в червено е function-a unbind която както се досещаш откачва даден евент от даден обект в случая this който ти е кликнат и mouseover избрания от мен евент. Така ако не съм те разбрал само замести оранжевия евент с този които искаш да откачиш.
$(function (){
$('.box').css("opacity", "0.5");
$('.box').bind('mouseover',function(){
$(this).stop().animate({"width" : "65px"});
});
$('.box').bind('mouseleave',function(){
$(this).stop().animate({"opacity" : "0.5", "width" : "130px"});
});
$('.box').click(function(event){
$(this).stop().animate({"opacity" : "1", "width" : "320px"},function(){
$(this).unbind('mouseover');
});
});
});
Увеличете...
 
Не знам аз ли съм дефектен, коетo е по-вероятно :), правя ето това:

Код: 
 jQuery(function (){
     jQuery('.box').css("opacity", "0.5");
     jQuery('.box').bind('mouseover',function(){
            jQuery('.box').stop().animate({"width" : "65px"});
            jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
     });
     jQuery('.box').bind('mouseleave',function(){
           jQuery('box').stop().animate({"opacity" : "0.5", "width" : "130px"});
     });
     jQuery('.box').click(function(event){
            jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"},function(){
            jQuery(this).unbind('mouseleave');});
     });
 });

Всичко си работи само click пак не работи. hpstuff ако съм ти омръзнал не се занимавай повече, явно няма да го направя това.
Благодаря ти, hpstuff - получаваш точка от мен за това, че имаш желание да ми помогнеш
 
jQuery(function (){
jQuery('.box').css("opacity", "0.5");
jQuery('.box').bind('mouseover',function(){
jQuery('.box').stop().animate({"width" : "65px"});
jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"});
});
jQuery('.box').bind('mouseleave',function(){
jQuery('box').stop().animate({"opacity" : "0.5", "width" : "130px"});
});
jQuery('.box').click(function(event){
jQuery(this).stop().animate({"opacity" : "1", "width" : "320px"},function(){
jQuery(this).unbind('mouseleave');});
});
});
Увеличете...

Замени червените с this което се однася само за потърпевшия обект така като си го написал се изпълнява за всички '.box'
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе