I am trying to create a slide effect using jquery. I want my images to have some text above them, which should fade out, then slide the image, then fade back in.
I was wondering if I can use an animate function inside another animate function, like this:
$('.slider-content').animate({
'opacity':'0'
},4000, function{
$('.slider-list').animate({
// fade("out");
'margin-left' : "+=" + left_indent
},4000,function(){
if(where == 'left') {
$('.slider-list li:first').before($('.slider-list li:last'));
} else {
$('.slider-list li:last').after($('.slider-list li:first'));
}
$('.slider-list').css({'margin-left' : '0px'});
fade("in");
});
});
});
I'm sorry if this question sounds stupid, but this came up while I was brainstorming for ideas. Is it possible?
The current code gives me an error on the third line, it says unexpected '}'.
Function should have parenthesis:
},4000, function(){
Related
i have a page with a logo that changes his color by scrolling the page. I want to keep this function except for some page, so i want to remove this function.
How i could remove the effect if i insert a css class in the code?
var b = $(window).scrollTop();
if( b > 60 ){
$(".navbar").addClass("scroll-fixed-navbar");
$(".navbar-brand img").attr('src', 'img/dark-logo.png');
} else {
$(".navbar").removeClass("scroll-fixed-navbar");
$(".navbar-brand img").attr('src', 'img/white-logo.png');
}
});
$(document).ready(function() {
"use strict";
for esample i want to insert if class contain "black", so keep only the dark logo (the previous function will be disabled)
Wrap the current javascript with this:
if (!$(someElement).hasClass("black")) {
//do stuff here
}
This will prevent the class="black" from running that script, I cannot help any further since all your code is not posted but this will certainly point you in the right direction.
I'm trying to create a custom slider using jQuery only I'm unsure on the best practice for how ot make this work.
My slider has 3 slides and a controls section each relating to a slide (1, 2, 3).
When a control is clicked I've got my slide fading out only I'm unsure on how to say if X control was clicked, add the active class to the relevant slide?
Ive made a fiddle to explain which i hope helps, what i need however is an explanation of the best practice in doing this?
Sorry if the questions hard to understand!
What I'm using to fade out my current slide, but then once its gone I cant rely on the active class to say add a class to the next element?
$('.ctrl-one').click(function(){
$('.active .slide-img').animate({
'marginRight' : "-=350px"
}, 500, 'easeOutQuint', function(){
$('.active .description').fadeOut().promise().done(function(){
$(this).parent().removeClass('active');
});
});
});
http://jsfiddle.net/Esm97/
I guess this is what you need,try this code , but am sure you can find a lot different methods.
$('.controls a').click(function() {
var current = $(this).attr('class').replace('ctrl-', '');
if (!$('.sector-banner .' + current).hasClass('active')) {
$('.active').animate({
'marginRight': "-=350px"
}, 500, 'linear', function() {
$(this).fadeOut().promise().done(function() {
$(this).css('margin-right',0);
$(this).removeClass('active');
$('.sector-banner .' + current).addClass('active');
$('.sector-banner .' + current).fadeIn();
});
});
}
});
I have the following jquery that slides a div horizontally:
$('.nextcol').click(function() {
$('.innerslide').animate({'left': '-=711px'}, 1000);
});
$('.prevcol').click(function() {
$('.innerslide').animate({'left': '+=711px'}, 1000);
});
What I want to happen is this... if the div.innerslide has a position that is left: 0px then I want to hide div.backarrow. If the position is not left: 0px, then it shows it.
Any help would be greatly appreciated.
EDIT (added HTML Markup)
<div class="backarrow prevcol">
<div id="mainleft" class="overflowhidden">
<div class="innerslide">
<div class="col">my content including next</div>
<div class="col">my content including next</div>
<div class="col">my content including next</div>
</div>
</div>
Try this:
if ($('.innerslide').css("left") == 0) {
$('div.backarrow').hide();
} else {
$('div.backarrow').show();
}
Fix for Double-Click Issue:
From what you described in your comment about the issue when the visitor double-clicks, it sounds like the double-click is causing two of the animation events to fire. To keep this from happening, you can either disable the click handler while the animation is running and re-enable it once it is finished, or you can try to write a new thread to continually check the element's position. One of these solutions is not a good idea - I'll let you figure out which one :) - but the other actually has a very simple solution that requires little change to your existing code (and may actually reduce your overhead by a teeny weeny amount):
$('.nextcol').on("click.next", function() {
$('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack());
$(this).off("click.next");
});
$('.prevcol').on("click.prev", function() {
$('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward());
$(this).off("click.prev");
});
Then add this this line to showHideBack() (and a complementary one to showHideForward() if you are using that):
$('.nextcol').on("click.next".....
I suggest that you write a function to set each click handler and another to remove each one. This will make your live very easy and the whole solution should reduce overhead by removing unnecessary click handlers while the animation is running.
Note: the animation method often calls its callback before the animation finishes. As such, you may wish to use a delay before calling the showHide... method(s).
Let me know if you have any questions. Good luck! :)
UPDATE:
Here is the updated version of the fiddle you gave me with all bugs ironed out. It looks like I misunderstood part of your goal in my original solution, but I straightened it out here. I have also included the updated jQuery, here:
var speed = 1000;
var back = $("div.backarrow");
var next = $(".nextcol");
var prev = $(".prevcol");
var inner = $(".innerslide");
function clickNext(index) {
next.off("click.next");
inner.animate({
'left': '-=711px'
}, speed, function() {
back.show(); //this line will only be hit if there is a previous column to show
next.delay(speed).on("click.next", function() {
clickNext();
});
});
}
function clickPrev() {
prev.off("click.prev");
inner.animate({
'left': '+=711px'
}, speed, function() {
if (inner.css("left") == "0px") {
back.delay(speed).hide();
prev.delay(speed).on("click.prev", function() {
clickPrev();
});
} else {
back.delay(speed).show();
prev.delay(speed).on("click.prev", function() {
clickPrev();
});
}
});
}
next.on("click.next", function() {
clickNext();
});
prev.on("click.prev", function() {
clickPrev();
});
I was going to also include a condition to check if you were viewing the last column, but, as I don't know what your final implementation will be, I didn't know if it would be applicable. As always, let me know if you need help or clarification on any of this. :)
You could try the step option — a callback function that is fired at each step of the animation:
$('.prevcol').click(function() {
$('.innerslide').animate({ left: '+=711px' },
{
duration: 1000,
step: function(now, fx) {
if (now === 0 ) {
$('div.backarrow').hide();
} else {
$('div.backarrow').show();
}
}
});
});
More examples of usage in this article The jQuery animate() step callback function
I'm using the jQuery cycle plugin to cycle through multiple divs in a container. All is working well the only functionality that I would like to add that I can't seem to find an option for with in the plugin is the ability to hide both buttons if there is only one slide present with in the container. My current code is this:
//Goal summary page cycler
$('#showGoal').after('<div id="nav">')
.cycle({
fx: 'scrollHorz',
speed:300,
prev: '#goalPrev',
next: '#goalNext',
timeout: 0,
pager: '#nav',
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return'';
}
});
// call back to remove buttons on first and last slide / adjust height of container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#goalPrev')[index == 0 ? 'hide' : 'show']();
$('#goalNext')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
I'm guessing I can either check the index and remove them both that way or possibly do something along the lines of an if statement for example (pseudo code) :
var index = this.index();
var numOfSlides = 0;
if ( numOfSlide < index ) {
//hide the buttons
}
else
{
//show the buttons
}
Thanks for any possible help with this!
The approach recommended by the plugin author is to hide the buttons using Javascript:
http://forum.jquery.com/topic/cycle-plugin-hide-prev-next
Problem solved and I feel like an idiot for missing it, You have to set the display of the arrows to none initially.
Shouldn't it already work? If you only have one slide then your onAfter function should take care of it. With one slide your index is always 0. Your opts.slideCount - 1 would also be zero because you would have one slide minus one.
Edit:
But as stated below, onAfter may need to be called after the page loads because when dealing with one slide the function may not be getting called.
One of my clients wants his logo in the header of the site to alternate with another logo.
So for example:
<img src="images/logo-1.png" style="display:block;" />
What would be the simplest way to alternate this with logo-2.png
We don't want a huge script, just a simple script which fades one logo out and another one in every 10 seconds, and rotates between logo-1.png and logo-2.png
Something with setInterval and fadeIn fadeOut? I'm not too sure
Thank you
I'm sure this could be simpler, but here's something that you could use as a starting point, if none of the many plugins suit your needs:
var img0 = "http://dummyimage.com/100x100/000/fff",
img1 = "http://dummyimage.com/100x100/000/ff0000",
current = false;
function switchImg() {
$("#img").fadeOut(function() {
$(this).attr("src", (current) ? img0 : img1).fadeIn();
current = !current;
});
}
setInterval(switchImg, 10000);
Here's a working example.
You could position the images one over another and just fade them and play with their z-indexes :
function switchLogo() {
var activeImg = $('#logo .active'),
nextImg = $('#logo :not(.active)');
activeImg.fadeOut(500, function() {
nextImg.addClass('active');
activeImg.removeClass('active').css({
opacity: 1,
display: 'block'
});
});
}
setInterval(switchLogo, 10000);
By positioning them on top of each other and modifying the z-index you get a smoother transition.
Here's a live demo : http://jsfiddle.net/gion_13/gFHMJ/
Maybe something like this: http://jsfiddle.net/WHnLs/
Check out Jquery Cycle
...Or jCarousel