根据变量更改鼠标事件

Question

I bet this is really simple and im gonna try to explain it the best I can: I am trying to build a gallery to show different transitions and reveals ( making an overlayed div transition out of sight, for instance ), and I want there to be a button that the user can click to experience the same transition with hover and with clicks.

To achieve this I simply created a new variable that I called toggleButton , initialized it at 0 , and made a conditional statement saying that should the variable be 0, the transition should be working on hover, and, should toggleButton be 1 , the transition would work with clicks. I am logging the variable changes on the console everytime the button to change them is pressed, and it works fine, no errors, but I can't achieve what i wanted to, the transition never changes, it always stays the way i initialize it ( if i init it at 1 then the transition works with clicks ).

I made a fiddle with a little example of what I'm talking about, I hope you can understand what I want by looking at it in case i failed at explaining it with words: http://jsfiddle.net/mcczrbgg/1/

Thanks in advance!

Answer 1

That If/Else that sets up mouseovers on line 21 only runs once.

Try making a .mouseenter() function AND the .click() function, but in each one, check the state of toggle button:

 $(".thumb").mouseenter(function() {
      if (toggleButton === 0) {

      }
 }
 $(".thumb").click(function() {
      if (toggleButton === 1) {

      {
 }

Is that what you had in mind?

Answer 2

The reason it is not working is because youre only running the function once at load. You need to also make sure the function runs every time you run the toggle event.

This is what I would do:

$(function(){

    var toggleButton = 0 ;
    console.log(toggleButton);

    $('.switchButton').toggle(function(){
        toggleButton = 1 ;
        $('.toggleButton').css({'transform' : 'rotateZ(0deg)'});
        $('#hover').removeClass('active');
        $('#click').addClass('active');
        console.log(toggleButton);
        runTransition();
        }, function(){
        toggleButton = 0 ;
        $('.toggleButton').css({'transform' : 'rotateZ(180deg)'});
        $('#hover').addClass('active');
        $('#click').removeClass('active');
        console.log(toggleButton);
        runTransition();
    });
    runTransition();
// thumb hover 
    function runTransition(){
        if ( toggleButton == 0 ) {
            $('.thumb').mouseenter(function(){
                $('.overlay').css({'left' : '-100%'});
            }).mouseleave(function(){
                $('.overlay').css({'left' : '0%'});
            });
        } else {
            $('.thumb').unbind('mouseenter mouseleave');

            $('.thumb').toggle(function(){
                $('.overlay').css({'left' : '-100%'});
            }, function(){
                $('.overlay').css({'left' : '0%'});
            });
        }
    }
});