We Keep Coding

jquery cycle trigger event on slide change not before or after

I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});

It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle

You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';

On mouseover fade embedded img or target specific classes

Is it possible with js / jQuery to fade just the embedded image instead of the div in order to reveal the divs background image? I have multiple instances of the classes below and only want to affect change to the one's that are selected.
e.g:
.image {
width: 200px;
background-image: url(elements/pattern.png);
}
<div class="box">
<div class="image"><img src="pics/001.jpg"/></div>
<div class="project">Title</div>
</div>
$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); });
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); });
Also, is it possible to address specific classes within a div ?
e.g:
$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); });
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); });
Thanks
....
SOLVED
Managed to get it to work by using find() as suggested and wrapping the image in an extra class. Now the image fades and .image's background pixel pattern blends through:
<div class="box">
<div class="image"><div class="p"><img src="pics/001.jpg"/></div></div>
<div class="project">Title</div>
</div>
$('.box').mouseover(function() {
$(this).find('.p').stop().animate({opacity:.3}, 200);
$(this).find('.project').css({color:'#FFF'});
});
$('.box').mouseout(function() {
$(this).find('.p').stop().animate({opacity:1}, 600);
$(this).find('.project').css({color:'#FFF'});
});
cheers!

Use jQuery's built in fade
$('.image').hover(function() { // on mouseover
$(this).stop().fadeTo(200, 0.7);
}, function(){ // on mouseout
$(this).stop().fadeTo(600, 1);
});
jQuery fadeTo()
Also to address specific items in a div you can use .find()
$('.box').mouseover(function(){
$(this).find('.image').animate({...}); // will animate .image when you hover .box
});

You can use next():
$('.image').mouseover(function() { $(this).next('.project').css({color:'#FFF'}); });

Try to look into the context attribute of the jQuery selector.
Basically:
$('.image').mouseover(function() { $('img',this).stop().animate({opacity:.7}, 200); });
This would select the img element inside the element where the mouseover is triggered.

JQuery sliding code not working

I am new to JQuery and am trying to make a div slide out from right to left, and then slide back in from left to right. The code I am using is:
function addListeners()
{
document.getElementById('save_li').addEventListener('click', function () {
$('#frame_div').animate({width:'toggle'});
document.getElementById('frame_opened').src = "save.php";
$('#frame_div').animate({width:'toggle'});
}, false);
document.getElementById('recover_li').addEventListener('click', function () {
$('#frame_div').hide("slide",{direction:"right"},1000);
document.getElementById('frame_opened').src="recover.php";
//$('#frame_div').animate({width:'toggle'});
$('#frame_div').show("slide",{direction:"left"},1000);
}, false);
}
window.onload=addListeners;
HTML:
<div src="save.php" class="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
<iframe id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no">
</div>
No errors are shown from either FireBug or WebDeveloper on Firefox, yet the code doesn't work. The iframe source changes with no animation.

I cleaned up your code and made it all-jQuery. Make sure you are including jquery.js (or jquery.min.v1.9.1.js or similar) in your page. If you keep the line that requires jQuery UI (see comment in code), make sure you include jQuery UI's CSS and JS files.
jQuery:
$(document).ready(function(){
$('#save_li').click(function () {
$('#frame_div').animate({width:'toggle'}, 1000);
$('#frame_opened').attr('src','save.php');
$('#frame_div').animate({width:'toggle'}, 1000);
});
$('#recover_li').click(function () {
$('#frame_div').hide("slide",{direction:"right"}, 1000); // this line requires jQuery UI
$('#frame_opened').attr('src','recover.php');
$('#frame_div').show("slide",{direction:"left"}, 1000); // this line requires jQuery UI
});
});
You were missing some required properties, such as the length of animation. (I set it to 1000, which is 1 second.)
If you want to omit jQuery UI, use this:
$(document).ready(function(){
$('#save_li').click(function () {
$('#frame_div').hide(1000).show(1000);
$('#frame_opened').attr('src','save.php');
});
$('#recover_li').click(function () {
$('#frame_div').hide(1000).show(1000);
$('#frame_opened').attr('src','recover.php');
});
});
HTML:
<div id="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
<iframe src="save.php" id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no"></iframe>
</div>
The src attribute goes on the iframe element. If possible, move styles to CSS instead.
Demo: http://jsfiddle.net/vy5AW/5/ using the HTML/CSS supplied by the OP in jsfiddle.net/vy5AW/2/

jQuery - hide div, then show on click

So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?

slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.

As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you

$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".

Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle

jquery zoom in and zoom out on clicking an image

I have an image which has to behave the following way:
When a user clicks on it the first time it the image should zoom-in and when clicked on the image again it should zoom-out.
Please help in figuring out how the two actions be performed by clicking on the image using jquery? Below is the code I have written for zooming in the image.
$('.tab1').click(function()
{
$(".GraphHolder").hide("slow");
$("#top-button-container").hide("slow");
$(".print").append('<button type="button">PRINT</button>');
$(this).animate({width: "70%"}, 'slow');
});

HTML:
<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">
Jquery:
$(function(){
$('#pic').toggle(
function() { $(this).animate({width: "100%"}, 500)},
function() { $(this).animate({width: "50px"}, 500); }
);
});
Example at: http://jsfiddle.net/K9ASw/32/

Have you tried using toggleClass? You can use the optional [duration] parameter to specify how long you want the transition to take.

If really old or crappy browsers are'nt an issue, I'd go for CSS transitions, easier and smoother.
FIDDLE

**here is the script**
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100);
});
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100);
});
});
</script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">

$(function () {
$('.tab1').on('click', function()
{
if($(this).hasClass('zoomed')) {
$(this).removeClass('zoomed')
$(this).children('img').animate({width: "10%"}, 'slow');
}
$(this).addClass('zoomed')
$(this).children('img').animate({width: "70%"}, 'slow');
}
});
});
I removed all the code not pertaining to the image resize.
Also, if you're dealing with an image, you have to target the image tag, not the outer div.
If the image is applied to the .tab1 class as a background image then you're sol.