Here's my current code, http://jsfiddle.net/AW5BK/2/
$(".feedback").hover(function(){
$(this).animate({marginLeft : "25px"},500);
},function(){
$(this).animate({marginLeft : "-25px"},500);
});
It works well, but whenever mousing over and out of the object quickly, it slides open and closes repeatedly. Is there a way to stop that from happening? Thank you
Use stop() for preventing repetitive animation conflict:
$(".feedback").hover(function(){
$(this).stop().animate({marginLeft : "25px"},500);
},function(){
$(this).stop().animate({marginLeft : "-25px"},500);
});
Here is working jsFiddle.
Better use native method:
$(".feedback").hover(function(e){
e.stopPropagation();
$(this).animate({marginLeft : "25px"},500);
},function(){
e.stopPropagation(e);
$(this).animate({marginLeft : "-25px"},500);
});
Or even better – CSS Transitions:
.feedback {
transition: all 600ms ease-in-out;
}
.feedback:hover {
transform: translate3d(-25px, 0, 0);
}
Both properties requires prefixes: -webkit-, -moz-, -o- and one without
Related
I've tried a lot of different options and I'm sure most would work if I knew what I was doing.
I want to click on an image and make it larger and centered in the screen, then I want to click on the same image and return it back to normal.
In the two individual scripts below I have erased the reverse effect but I basically used functions that changed the css settings back to width:250, height:250, and marginLeft:9%. All I could get it to do successfully was enlarge an image but then it shrank automatically once it had fully enlarged. I need to make the function enlarge and then wait until I click the image again for it to shrink.
<script>
$('document').ready(function(){
$('.hello_mom').on('click', function(){
$('.lbs_lease').animate({
width:"350px",
height:"350px",
zIndex:"10",
marginLeft:"28.4%"
}, 500 );
});
});
</script>
<!--<script>//My idea with this second script was to set an initial variable that I would use to make the enlargement animation run (with an if statement) and the shrinking animation stop until the variable was changed at the end of the function. Once the variable changes the else statement would become true and run my reverse animation. However, it seems redundant when the animation still doesn't wait for another click to occur before it runs.
$a = 5;
$c = 10;
var b = $a;
if(b < $c) {
$('.lbs_lease').animate({
width:"350px",
height:"350px",
zIndex:"10",
marginLeft:"28.4%"
}, 500 )};
</script>-->
you have 2 ways to do that ..
1- by using addClass and removeClass with transition
in css
.imageClicked{
width:350px;
height:350px;
zIndex:10;
marginLeft:28.4%;
transition : 0.5;
}
js
$('document').ready(function(){
$('.hello_mom').on('click', function(){
if($('.lbs_lease').hasClass('imageClicked')){
$('.lbs_lease').removeClass('imageClicked');
}else{
$('.lbs_lease').addClass('imageClicked');
}
});
});
2- by make another animate with default style and use boolean true or false
$('document').ready(function(){
var imgClicked = true;
$('.hello_mom').on('click', function(){
if(imgClicked == true){
$('.lbs_lease').animate({
width:"350px",
height:"350px",
zIndex:"10",
marginLeft:"28.4%"
}, 500 );
imgClicked = false;
}else{
$('.lbs_lease').animate({
//type your default style here
}, 500 );
imgClicked = true;
}
});
});
something like this:
var left = true;
$('.hello_mom').on('click', function () {
if (left) {
$(this).animate({
'marginLeft': "-=30px"
});
left = false;
} else {
$(this).animate({
'marginLeft': "+=30px"
});
left = true;
}
});
http://jsfiddle.net/e1cy8nLm/
You can do something like this: JSFiddle Demo
$('img').on('click', function(){
$(this).toggleClass( 'enlarge' );
});
CSS:
img {
// set the initial height and width here so we can animate these properties.
width:100px;
height:100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
// toggle this class with jQuery to enlarge the img on click
.enlarge {
width:200px;
height:200px;
}
One of the methods will be using addClass and removeClass jquery functions keeping track of the current state of image.
The enlarged variable has the current state of the image and toggles it onclick with addition or removal of class.
Note the transition time is mentioned for both the classes, the added/removed as well as the original styling class to prevent abrupt transition while resizing to both states.
Here is a jsfiddle for that : JS FIDDLE DEMO
HTML Code :
<div>
<img class="hello_mom" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
CSS Code :
.hello_mom{
width:250px;
height:250px;
background : red;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.hov_class{
width:350px;
height:350px;
z-index:10;
//margin-left:28.4%;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
JS Code :
var enlarged=0;
$('document').ready(function(){
$('.hello_mom').on('click', function(){
if(!enlarged){
$('.hello_mom').addClass("hov_class");
enlarged=1;
}
else{
$('.hello_mom').removeClass("hov_class");
enlarged=0;
}
});
});
Take a look at this
http://julian.com/research/velocity/
Velocity is javascript animation, made faster than CSS animation.
...and here you also have a reverse method
I am trying to convert a piece of code from jQuery to Angular, and since I am super new to this I am not sure if I am doing this right.
Here is the jquery code:
$('ul.nav li.dropdown').hover(function(){
$(this).find('.dropdown-menu').stop(true, true).delay(300).fadeIn();
}, function(){
$(this).find('.dropdown-menu').stop(true, true).delay(300).fadeOut();
});
What it is doing is when I mouseover a nav item, a div fades in.
This is what I have tried, but nothing happens:
angular.module("headToggle", ["ngAnimate"]).animation(".management-settings", function(){
return{
enter: function(element, done){
element.css("display", "none");
element.fadeIn(200, done);
return function(){
element.stop();
};
},
leave: function(element, done){
element.fadeOut(200, done);
return function(){
element.stop();
};
}
};
});
What am I doing wrong? Is what I am doing overkill?
You don't need Angular for this, you can do it with pure CSS:
.management-settings {
opacity: 0;
transition: opacity 200ms;
}
.management-settings:hover {
opacity: 1;
}
The full documentation on transitions can be found here: Using CSS transitions
I think you need to chain a .animation onto the element.css(), e.g:
element.css({'opacity', '0'}).animate({'opacity', '1'}, 200, done);
This could also be accomplished with ng-mouseover to change a boolean variable bound to ng-class e.g:
<div class=".dropdown-menu" ng-mouseover="hovered = true" ng-class={'is-hovered': hovered}></div>
Then in your css:
`.dropdown-menu{
transition: opacity 200ms linear;
opacity: 0;
}
.dropdown-menu.is-hovered{
opacity: 1;
}`
Previous answer is correct, you can use angular's built-in directives and pure css, and not have to write any of your own JS
Arg, I don't have the rep to reply to your comment on the previous post, but you can use the css property transition-delay
I'm trying to expand my searchbar using jQuery.
Also I want to hide the nav links.
I have some jQuery code like this. This code works fine when focus.
$(".searchBox input").focus(function(){
$("#navlinks").css('display','none');
$(this).css({'width':'200px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
});
$(".searchBox input").focus(function(){
$(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
$("#navlinks").css('display','block');
});
The second function also works fine except it display the content before animation complete.
So I want $("#navlinks").css('display','block'); to be exectuted only when animate complete.
Can anyone tell me how?
Thanks
.css() doesn't have a callback function, but .animate() does. Just set the time to 0 and use animate.
$(".searchBox input").on('focus',function(){
$(this).animate({width:100,mozTransition:'width 500ms ease-out',webkitTransition:'width 500ms ease-out',transition:'width 500ms ease-out'},0,function(){
$("#navlinks")
.delay(500)
.css({display:'block'});
});
});
Edit: included delay, which is required. (Thanks eicto)
Since you know how long takes your animations, why do not use setTimeout() after CSS change?
As far as I see your animation takes about 0.5 seconds. You could easily execute your "callback" seamlessly at end of your animation specifying the same amount of time in milliseconds.
$(".searchBox input").focus(function(){
$(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
setTimeout( function() {
$("#navlinks").css('display','block');
}, 500);
});
I would recommend using .animate() like
$(".searchBox input").focus(function(){
$(this).animate({
'width': '100px'
}, 500, function() {
$("#navlinks").css('display', 'block');
});
});
This will work on all browsers, and the navlinks command will be insured to begin after the animation is complete. Note: the 500 is the number of milliseconds the animation will take to complete, so you can adjust accordingly.
Here is the .animate() documentation:
http://api.jquery.com/animate/
I came along here, but I used another solution:
$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
// Do something when the transition ends
});
As you see, this is doing something, when the transition has ended.
This is described here:
http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end
Greetings,
Lars
Here is described
transitionend event, let's try that:
CSS:
#test {
width: 100px;
border: 1px solid black;
-webkit-transition: all 1s;
-moz-transition all 1s;
transition all 1s;
}
#test.wide {
width: 200px;
}
JS:
var test = $('#test');
test.bind('transitionend webkitTransitionEnd oTransitionEnd', function () {
$('body').append('<div>END!</div>');
})
$('button').click(function () {
test.toggleClass('wide');
});
DEMO
so, what is the different between:
A) (work for me)
... .animate({opacity: "show", marginTop: "25"}); ...
...
B (doesn´t work for me)
... .animate({opacity: "1", marginTop: "25"}); ...
e.g http://jsbin.com/iquwuc/6/edit#preview
When you call hide() that's roughly equivalent to .css('display', 'none'), so later changing opacity back to 1 changes the opacity of a hidden element. And that's why show() works - because it makes the element block again.
It is because you are show and hiding, instead of animating the opacity. (Kinda obvious :P ).
Edited code : http://jsbin.com/iquwuc/11/edit#preview
You can make the following amendments to use the opacity setting:
Add the following css:
.sub-menu li#access ul {opacity:0; display:none;}
And change your script to this:
$(document).ready(function(){
$('.sub-menu').hover(function(){
$('.sub-menu li#access ul').show();
$('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500);
},
function() {
$('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){
$('.sub-menu li#access ul').hide();
});
});
});
Basically what is happening is:
On hover, you are SHOW'ing the dropdown with opacity 0, then animation happens to set margin and opacity. and on hover-out, animating opacity to 0 and HIDE'ing it again.
in the css file or inline. Set the id or class to
inline - <div id="myid" style="opacity:0;"></div>
in css
#myid { opacity: 0; }
.myclass {opacity: 0; }
that way when calling the animate opacity from jQuery it will function other wise your just calling an animation that is already at 1 opacity
I would use dojo bibliothek for it (http://dojotoolkit.org/reference-guide/dojo/animateProperty.html). You will find in DOJO more than only animating functionality, this framework offers a lot of components to solve big area of different problems.
I'm trying to achieve a fade-on-hover effect with JQuery. Currently I have an element with a "hov" class attacked to it, without javascript the css will simply change it's color on :hover. With JQuery.
The idea is to clone the element as it's rolled over and place it directly infront, stripping it of the "hov" class so it's just static. Then I fade it out so it create the transition effect.
I'm having trouble though, after I strip the "hov" class from the clone, it KEEPS acting as though its still there. I can mouse over the clone even though it shouldn't be able to be targeted through hov. Any ideas / tips?
<a href="#" class="hov rounded-50 action-button">Fade Me Out< /a>
$(".hov").mouseover(function() {
// Clone the current element, remove the "hov" class so it won't trigger same behavior
// finally layer it infront of current element
var $overlay = $(this).clone(true).removeClass("hov").insertAfter($(this));
// Push it to the side just for testing purposes - fade it out
$overlay.css({left:'300px'}).fadeOut({duration:500, ease:'easeOutQuad'});
});
No need to clone the element, just fade the original element:
$('.hov').mouseenter(function() {
$(this).fadeOut();
});
// Optionally:
$('.hov').mouseleave(function() {
$(this).stop(true, true).show();
});
You can also use the hover function:
$('.hov').hover(function(){
$(this).fadeOut();
},
function(){
$(this).stop(true, true).show();
});
If you just want it to partially fade, you can animate the opacity property:
$('.hov').mouseenter(function() {
$(this).animate({'opacity': 0.5});
});
If you just want it to pulse, then return to normal opacity:
$('.hov').mouseenter(function() {
$this = $(this);
$this.animate({'opacity': 0.5}, {
'complete': function(){
$this.animate({'opacity': 1});
}
});
});
Finally, if your willing to forgo support of older browsers, you can do it all with css:
.hov {
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
}
.hov:hover {
opacity: 0.5;
}