Im trying to increase an elements height when hovering over it but at the moment when you move the mouse away from the element it reverts the height, is there a way to keep the element at the height I animate to? Here's my code so far:
var width = $(window).width();
$("#projects .project:first").addClass("active");
$("#projects .project:first").height(100);
if (width > 800) {
$('#projects .project').hover(function (e) {
e.preventDefault();
var prev = $("#projects .project.active");
$('#projects .project').removeClass('active');
$(this).addClass('active');
if ($(this).find("p").text().trim().length) {
$(this).animate({
height: '100px'
}, { duration: 1000, queue: false });
$(prev).animate({
height: '30px'
}, { duration: 1000, queue: false });
}
});
}
I found in the end the best solution to achieve the functionality I wanted was using accordion: http://jqueryui.com/accordion/
Related
I'm trying to animate two things at the same time. one is
var submenuHeight = parseInt($("#submenu").height());
console.log(submenuHeight);
var scrollOffset = parseInt($(window).scrollTop());
console.log(scrollOffset);
scrollOffset = scrollOffset - submenuHeight;
console.log(scrollOffset);
$("#submenu").animate({
height: '18px'
}, {
duration: 250,
queue: false
});
$('html, body').animate({
scrollTop: scrollOffset
}, {
duration: 250,
queue: false
});
<div id="submenu"></div>
the side then includes lots of text. I want to be able to close the menu but stay at the same piece of text, meaning animate the scrolling to the same part of the page.
but weirdly this animation does not work simultaneously even though I set queue to false. what might be going wrong?
I put together a jQuery animation for a menu background. The menu has a dropdown and when you hover over the menu the animation kicks in, but the dropdown starts to act all wonky. Pretty new to jquery so not sure why this is doing that.
I added a div (menu-bg) with absolute position to change height on hover inside the menu.
Here is my javascript controlling the animation:
$('.navbar-nav >li > a').hover(
function() {
$(this).stop().next().animate({
height: "60px"
}, {
easing: "swing",
queue: true,
duration: 400
});
},
function() {
$(this).stop().next().animate({
height: "0px"
}, {
easing: "swing",
queue: true,
duration: 200
});
});
Here is a link to the site to view the actual issue, you will notice it when you hover over home.
http://bratworks.com/static
I found the following changes in your code got the job done:
Inside of init.js around line 15 remove the 200 millisecond delay from the dropdown menu fadeOut().
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
I re-wrote your hover function to target the li's instead of the a, it looked like there was some kind of conflict there:
$('.navbar-nav > li').on({
mouseenter: function() {;
$(this).find('.menu-bg').animate({ height: "60px" });
},
mouseleave: function() {
$(this).find('.menu-bg').animate({ height: "0px" });
}
});
And finally, I overwrote the CSS that was creating that 5px margin gap on the .dropdown-menu:
.dropdown-menu {
margin-top:0px!important;
}
There you go! Please let me know if you'd like me to expand on anything?
I am trying to make a fairly simple animation; on mouse over, the button will animate to be bigger. When not hovering, it will return to it's original size. However, whenever when I try this sample code, it warps the button to odd sizes
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
'height': $(this).height() * 2,
'width': $(this).width() * 1.3
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
height: $(this).height(),
width: $(this).width()
}, 300);
});
http://jsfiddle.net/RBLqY/1/
how could this problem be solved?
I'm not entirely sure why your code is failing, seems like you have some sort of calculation error when returning to the original size. After fiddling around a bit I found this solution. By animating the padding instead of the height and width you don't have to worry about the height width ratio when it comes to resizing the link.
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
padding: '12px'
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
padding: '7px'
}, 300);
});
jsfiddle
Hope this helps.
The slide animation is not smooth, I googled a bit and found out that I need to set a fixed width for my container but the container's width is set to fill up between 2 other divs.
$('.content_block .content_block_title').on("click", function(event) {
var target = event.target || event.srcElement;
var child = $(target).next();
child.css('width', child.width()); //tried with this but it didnt make the anim smoother.
if (!child.is(':hidden'))
child.slideUp(350);
else
child.slideDown(150);
});
if (!child.is(':hidden'))
child.animate({
height: "350px"
}, 5000, function() {
// Animation complete.
});
else
child.animate({
height: "150px"
}, 5000, function() {
// Animation complete.
});
I have a Problem concerning scrolling in jQuery mobile.
I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:
#navbar | #header (with Button #showNavBar)
| #content
|
| #footer
At first the #navbar is behind behind my content area (with header and footer).
By clicking the Button #showNavBar I am doing the following:
header.animate({
left: "200px"
}, { duration: 300, queue: false });
content.animate({
left: "200px"
}, { duration: 300, queue: false });
So the users can see the navbar on the left side. To this point everything works well.
But trouble starts. Now it is possible to scroll to the right side to see the full content area.
But it isn't possible to scroll the header...
Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.
try
$(document).delegate('.ui-content', 'touchmove', false);
Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.
Here is how I do it right now. The body gets a new width in the animation.
var viewport = {
width : $(window).width(),
height : $(window).height()
};
function openme() {
$(function () {
topbar.animate({
left: "200px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "200px", width: (parseInt(viewport['width']) - 200) + "px",
}, { duration: 300, queue: false });
console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px", width: "100%",
}, { duration: 180, queue: false });
console.log("close me");
});
}
Hope this helps anybody.
Thanks to Rachel for beeing so patient and giving me a help!