I have a really simple jQuery script which when an input element is focused on, it expands its width to 250px (using the focusin() event), and when the focus is lost, it shrinks back to 200px using the focusout() event. But I'm not sure I'm using the most syntactically efficient code for what I'm trying to achieve. Here is my current code:
$(document).ready(function() {
$('input').focus(function() {
$(this).animate({
width: "250px"
}, 500);
});
$('input').focusout(function() {
$(this).animate({
width: "200px"
}, 500);
});
});
To me however, this seems unnecessarily bulky. I've tried googling around, but I can't get the keywords right to find any results which help me. Surely there is a much simpler method to achieve such an effect, like a toggle? How would I achieve this?
I see nothing wrong with what you've done. If you feel you're repeating yourself too much, you might pull out some logic into a animateWidth function:
$(document).ready(function() {
function animateWidth(element, width) {
element.animate({ width: width }, 500);
}
$('input').focus(function () { animateWidth($(this), '250px'); })
.focusout(function () { animateWidth($(this), '200px'); });
});
Related
I am using the following code to animate the disappearing of a textarea once the control is out of focus and the textarea is empty.
$(this).blur(function ()
{
var value = $(this).val().trim();
if (value == "")
{
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000,'linear',
function ()
{$(this).parent().css("display", "none")});
}
});
The box disappears without animation. But if i run the following code the animation is still there:
$(this).blur(function ()
{
var value = $(this).val().trim();
if (value == "")
{
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000);
}
});
I am not sure why the display:none code is executing before the completion of the animation.
JSFiddle: https://jsfiddle.net/7pbuxtkz/
Give this a try. It utilizes the promise() and done() instead of using it directly from the callback itself. Although your original code works for me, it's worth trying. Promise() will ensure that all of the animations are done.
$('.notesArea').each(function () {
$(this).blur(function () {
var value = $(this).val().trim();
if (value == "") {
// empty; make it disappear
$(this).animate({
width: 0,
height: 0
}, 1000).promise().done(function () {
$(this).parent().css("visibility", "hidden")
});
}
});
});
Let me know how it goes and we'll go from there. As I mentioned before, if this doesn't work, then I feel it's something taking place from your CSS. If that's the case, I'll poke around and see what I can find out for you.
More information on promise(): https://api.jquery.com/promise/
I know you said you're using multiple CSS files, which is why you didn't post it here. I would go through those CSS files and see if there is anything that's setting the transition-duration on it to something lower than what you're setting your animation's duration to.
I'm using the animate function in jQuery to re-size a content area when the user hovers over the element.
The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once.
I have created a jsfiddle here I have also added the js I used.
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).animate({
height: minheight
}, 1000);
});
Any ideas would be very much welcomed.
Cheers
What you're looking for is .stop().
.stop() will cancel all animations on an object.
http://jsfiddle.net/zxm9S/1/
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).stop().animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).stop().animate({
height: minheight
}, 1000);
});
Hi I'm having a div which width is increased with jquery. I want when that width reaches 100% to do something
$(function() {
$('.play').click(function() {
$('.loader').animate({
width: "100%"
},1500);
$('.video img').attr('src','css/images/movie-click.jpg')
$(this).hide();
if($('.loader').width()==$('.video img').width()) {
$('.video img').attr('src','css/images/movie.jpg')
}
});
Something is not right in the if statement. if someone can help me. My idea is to check if the with is 100%, and if it is, everything to be back to normal.(play to be showen, width=0%, img attr different.)
Use the complete callback in animate to execute code once the animation is finished:
$('.play').click(function () {
$('.loader').animate({
width: "100%"
}, 1500, function() {
// any code here will run only after the animation is complete
$('.video img').attr('src', 'css/images/movie.jpg');
});
// any code here will run as soon as the animation starts,
// before it's completed
});
The code in the click function is only called once, so your if statement is not being ran continuously as it animates. Instead, simply add that logic to a callback after the .animate() is complete:
$('.loader').animate({
width: "100%"
},1500,swing, function() {
$('.video img').attr('src','css/images/movie.jpg');
});
Something is not right in the if statement
Indeed :-) Your current code just compares the css values returned by the two .width() calls - which will be false of course.
That's not how you wait for an animation. The animation code is asynchronous, your animate() call just starts the animation but returns immediately (and goes on hiding the button and evaluating the condition).
Instead, pass a callback function to animate, it will be executed when the animation has completed:
$(function() {
$('.play').click(function() {
$(this).hide();
var $img = $('.video img');
$img.attr('src','css/images/movie-click.jpg');
$('.loader').animate({
width: "100%"
}, 1500, function() {
// executed after the animation
$img.attr('src','css/images/movie.jpg');
});
});
});
I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.
When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.
Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({ width: "903px" });
});
}, function() {
$(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
$(".children").slideUp(300);
});
});
Working example: http://jsfiddle.net/varFS/
Titanium, you must use timeout for hiding your menu to get desired result:
$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({
width: "400px"
});
});
}, function() {
setTimeout(function() {
if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
$(".children").css("padding-top", "21px").hide();
}
$(".menu-line").stop(true, false).animate({
width: "0px"
}, function() {
$(".children").slideUp(300);
});
}, 400);
});
Working Example
<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218
jQuery(".attachment-thumbnail").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
jQuery(this).pixastic("desaturate");
}
});
Note that sepia won't do anything combined with desaturate
The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows
revert : function(img) {
$(window).load(function () {
$(".thumb").pixastic('desaturate');
$(".thumb").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
$(this).pixastic("desaturate");
}
});
})
Hi guys everything said above works great if you're directly setting hover events on the image.
Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).
Here is my code in case anyone else is dealing with something similar:
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});