Response title
This is preview!
off() does not work
in Using jQuery
•
9 years ago
Hi all,
I am pretty desperate :-( since for days I am working on this problem, no way to fix this :-(((
This is my markUp:
<div id = "menu">
<div id="Collection"class="item firstleft first"> <img src="images/COLLECTION.png"></img></div>
<div id="Recherche" class="item secondleft second"> <img src="images/RECHERCHE.png"> </img></div>
<div id="Corporate" class="item secondright third"><img src="images/CORPORATE.png"> </img></div>
<div id="Contact" class="item firstright"> <img src="images/CONTACT.png"> </img></div>
</div>
Then I try to install two functions (one would be even better) to make either the first and the second div change their places or the first and the third (depending which div is clicked.
(The fourth element in the menu remains static)
I tried so much but this is all what I could achieve so far:
$(document).ready(function(){
$(".first").on( 'click', function() { … changePlace(); } )
$(".second").on( 'click', function() { … changePlace(); } );
$(".third").on( 'click', function() { … changePlace_2(); } );
});
function changePlace() {
var ww = $(window).width();
var dur = ww/2.4;
var $first = $(".first");
var $second = $(".second");
var $third = $(".third");
$second .stop(true)
.animate({ left: '10.5%' }, dur, 'easeOutSine')
.prependTo("#menu")
.removeClass("second")
.addClass("first");
$first .stop(true)
.animate({ left: '36%' }, dur, 'easeOutSine')
.removeClass("first")
.addClass("second");
//Exchanges the list of titles in the fold out submenu of the very left menu item based on the work section choice
gtitles = ( gtitles == gtitlesCol ) ? gtitlesRech : gtitlesCol;
}
//make the third left and very left menu item change position so that the new left one may open its subtitles as well
function changePlace_2() {
var ww = $(window).width();
var dur = ww/1.5;
var $first = $(".first");
var $second = $(".second");
var $third = $(".third");
$third .stop(true)
.animate({ left: '10.5%' }, dur, 'easeOutSine')
.prependTo("#menu")
.removeClass("third")
.addClass("first")
.off('click') //Seems not working - why not???
.on('click', function() { changePlace(); } );
$first .stop(true)
.animate({ left: '64%' }, dur, 'easeOutSine')
.insertAfter( $second )
.removeClass("first")
.addClass("third")
.off('click') //Seems not working - why not???
.on('click', function() { changePlace_2(); } );
//Exchanges the list of titles in the fold out submenu of the very left menu item based on the work section choice
gtitles = ( gtitles == gtitlesCol ) ? gtitlesCorp : gtitlesCol;
}
I know that this is crap but it is the nearest I came and most of all it works only (badly yet) 2 or 3 times then the functions make each other crash. I tried so hard and have the doubt that the point is that the off() in the function do not work at all, so that there remain several functions attached after a while to the divs.
I urgently need help!! I am getting nuts :-(
Thanks for any hints about this!
Garavani
PS the additional class exchanges are needed for another hover effect so that this is additional
1
