Develop Reference

Jquery animate finish triggers half way animation

I have a card layout that looks like this: https://image.prntscr.com/image/AOyf0PwmQDWtJwqf_r4ckA.png
With the help of this code I going to extend the card when I press "Show Details" but I can't seem to change the time the animation runs OR sync the finished function to when it's actually done. It triggers halfway of the way the height animation has happen.. what am I doing wrong?
Here is the jquery code:
$(document).ready(function () {
var block;
var pTag;
$(".showFullCard").click(function () {
block = $(this).parents(".roadmap-block");
$(this).toggle(function () {
$(block).animate({
height: "400px"
}, 200);
$(block).css({ "position": "relative", "z-index": "1" })
}, function () {
$(block).animate({
height: "700px"
}, 200);
$(block).css({ "position": "absolute", "z-index": "2" })
});
});
$(document).click(function (event) {
if (!$(event.target).closest(block).length) {
$(block).animate({
height: "400px"
}, 200, function(){
$(block).css({ "position": "relative", "z-index": "1" })
});
}
});
});

Please add the HTML markup so we can test the code.
one option that might be easier is to create a CSS class with transition and toggle that class using :
$(document).ready(function(){
$("showFullCard").click(function(){
$(this).toggleClass('yourClass');
});
});
CSS:
.yourClass {
height:600px!important;
width:200px;
padding 100px;
transition: all .5s ease;
}
.roadmap-block{
width:400px;
height:400px;
background:#ccc;
padding:20px;
transition: all .3s ease;
}

jquery - img hover add style

i'm using the code below from http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/ to prepend a span to my images. the script works fine but i need more style-values to be inserted into the span.
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0")
// ON MOUSE OVER
$(".roll").hover(function () {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
// SET OPACITY TO 70%
$(this).css("height",h).css("width",w).stop().animate({
opacity: .7
}, "slow");
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
the img-markup is something like this
<span class="roll" style="height: 137px; width: 172px; opacity: 0;"></span>
<img width="172" height="135" class="img-responsive-rte" alt="" src="img/butterflower.jpg" style="padding-right: 10px; padding-bottom: 10px; float: left;">
is there a way to add the padding and foat values to the span?
thanks for your help

Simply add padding and float next to other rules:
$(this).css("height",h).css("width",w).css("padding", "10px"). css("float", "left").stop().animate({
opacity: .7
}, "slow");
It's better to assign all css rules toghether:
$(this).css({"height":h, "width":w, "padding":"10px", "float":"left"}).stop().animate({
opacity: .7
}, "slow");

jQuery, shrink div width from left to right

As you can see there is a slide to the left and the with decreases from 100% to 0 at the same time.
I want to get this same effect but from left to right.
I can't get it right!
jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing');
Example Fiddle: http://jsfiddle.net/RsBNk/

That is pretty simple. Align the image to the right and then decrease it by 25% using jQuery like below:
jQuery:
jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing');
CSS:
.box {
width: 100%;
position: absolute;
top: 0;
right: 0; /* Modified this line */
height: 200px;
background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg');
background-position: right; /* EDIT: This property needs to be set */
}
Updated Demo

May be this helps you
$('#target').animate({
width : '0',
marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ?
$('#target').outerWidth() : 0
}, 1500, 'swing');
check demo

Javascript Libraray SLY - Scrollbar does not work

I'm having a problem with Sly scrollbars.
I want to set up a timline in which I cann scroll by dragging with the mouse and with a scrollbar. Scrolling with the mouse works fine but I can't get the scrollbar to work and there is no proper documentation.
Also there are no errors on the console.
this is my scrollbar:
<div id="scrollbar">
<div class="handle"></div>
</div>
this is the css:
#scrollbar {
width: 100%;
height: 30px;
background: #f00;
margin-top: 10px;
line-height: 0;
}
#scrollbar .handle {
width: 50px;
height: 30px;
background: #00f;
position: absolute;
}
and the javascript call to initate the scrolling
$("#timeline").sly({
dragSource : '.frame',
horizontal : 1,
itemNav: 'basic',
smart : 1,
activateOn : 'click',
mouseDragging : 1,
touchDragging : 1,
releaseSwing : 1,
scrollBy : 1,
activatePageOn : 'click',
speed : 50,
easing : 'easeInOutBounce',
swingSpeed : 0.07,
elasticBounds : 1,
dragHandle : 1,
dynamicHandle : 1,
clickBar : 1,
scrollbar : '$("#scrollbar")',
dragHandle : 1
});
I need this for a university project, so it would be really cool if somebody has a solution to my problem.

There are two little mistakes.
Change the line
scrollbar : '$("#scrollbar")'
to
scrollBar : $("#scrollbar")
and everything should work as expected.

Display title attribute of an image inside a DIV

This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.

I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.

Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html