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.
});
Related
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/
On click of a panel (say panel1) I am trying to animate scroll to the newly added panel (panel2) to left side of the screen.
I have tried
windows.location = '#p2' // panel2 id
but that doesn't animate and bluntly takes the focus to the new panel
Here is the JSFiddle .
Note: I am not sure jquery or CSS animations can be done here.
looking for CSS animations
You can do like this:
function addPanel(elemId) {
$('#'+elemId).css('display', 'flex');
$('html, body').animate({
scrollLeft: $('#'+elemId).offset().left
}, 1000, function() {
// Animation complete.
});
}
Working fiddle
You can use jQuery to animate your container so the new panel (panel2) is visible in the view port.
https://jsfiddle.net/wtfc8o2t/6/
function addPanel(elemId) {
document.getElementById(elemId).style.display = 'flex';
$( "#flex-container" ).animate({
left: "-=450"
}, 1000, function() {
// Animation complete.
});
}
I am making a gallery with thumbnails. It works but I want to make an image transition, and I want it to fades in. In this case it fades in but only for the first image. The next images show up without any animation.
$('.picture').click(function() {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
});
And also, can someone tell me how to position the image in the div to be centrally placed using the width and the height of the div and the image? I don't want to use plugin for the gallery, so I would appreciate your help very much.
To maintain your current transition try
var $simg = $("#screen img");
$('.picture').click(function () {
var $img = $(this);
if ($simg.height() == 0) {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
} else {
$("#screen img").animate({
height: "0"
}, function () {
$(this).attr('src', $img.attr('src')).animate({
height: "400px"
}, 2000)
});
}
});
Demo: Fiddle, using fade animation
I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim
Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.
I have 5 list items, when one is clicked the only method I know is to animate all the elements then reanimate the selected element to the new width. Can anyone advise me how I can cut down this process so only the current active item gets animated and the class removed and then the new item gets animated and the active class added?
JS
var test = $('#test'),
test_li = test.children(),
small = 60,
large = 200;
test_li.on('click', function(e) {
if( !$(this).hasClass('active') ){
test_li.animate({ width: small }, 300).removeClass('active'); //animates every single li every time
$(this).animate({ width: large }, 300).addClass('active');
}
});
Fiddle Here: http://jsfiddle.net/TSNtu/1/
var test = $('#test'),
test_li = test.children(),
small = 60,
large = 200;
test_li.on('click', function(e) {
// if clicked element is active itself then do nothing
if ($(this).hasClass('active')) return;
// remove active from others
$('.active', test).animate({
width: small
}, 300).removeClass('active');
// animate the clicked one
$(this).animate({
width: large
}, 300).addClass('active');
});
DEMO
With a single chain
var test = $('#test'),
test_li = test.children(),
small = 60,
large = 200;
test_li.on('click', function(e) {
// if clicked element is active itself then do nothing
if ($(this).hasClass('active')) return;
$(this) // clicked li
.animate({
width: large
}, 300)
.addClass('active')
.siblings('.active') // other li
.animate({
width: small
}, 300)
.removeClass('active');
});
DEMO