TweenMax hover out is not triggering animation

up vote
0
down vote

favorite

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

asked Nov 7 at 6:06

thebeat42

158

add a comment |

up vote
0
down vote

favorite

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

asked Nov 7 at 6:06

thebeat42

158

add a comment |

up vote
0
down vote

favorite

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

asked Nov 7 at 6:06

thebeat42

158

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($("grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

javascript jquery tweenmax

asked Nov 7 at 6:06

thebeat42

158

asked Nov 7 at 6:06

thebeat42

158

asked Nov 7 at 6:06

thebeat42

158

asked Nov 7 at 6:06

thebeat42

158

asked Nov 7 at 6:06

thebeat42

158

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

You're missing the dot on your selector

function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

answered Nov 7 at 6:57

slashsharp

2,30111020

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53184337%2ftweenmax-hover-out-is-not-triggering-animation%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

You're missing the dot on your selector

function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

answered Nov 7 at 6:57

slashsharp

2,30111020

add a comment |

up vote
0
down vote

You're missing the dot on your selector

function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

answered Nov 7 at 6:57

slashsharp

2,30111020

add a comment |

up vote
0
down vote

You're missing the dot on your selector

function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

answered Nov 7 at 6:57

slashsharp

2,30111020

You're missing the dot on your selector

function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

function over(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "50%",

        ease: Expo.easeInOut

  });

};



function out(){

  TweenMax.to($(".grid-item-20"), 1, {

        width: "0",

        ease: Expo.easeInOut,

  });

};



$(".grid-item-17 a").hover(over, out);

.grid-item-20 {

  border-bottom: 1px solid #000;

  width: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="grid-item-17">



  <a href="#">Home</a>



</div>





<div class="grid-item-20">



</div>

answered Nov 7 at 6:57

slashsharp

2,30111020

answered Nov 7 at 6:57

slashsharp

2,30111020

answered Nov 7 at 6:57

slashsharp

2,30111020

answered Nov 7 at 6:57

slashsharp

2,30111020

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

i,2YHUw,p8N8s0PkH8NNdMpsc EFTEMS,fxZuXtyDRY

搜尋此網誌

Zystkmt