Develop Reference

CSS/JS: Animate Inline Element Upon Text Change

When an inline element's text changes, it is usually the case that its computed width or height changes as well.
Usually it's trivial to transition property changes with CSS, for example, adding a transition to change the background-color of an element upon hover.
However, inline element dimensions are really tricky. A simple transition property does not animate the change in computed width.
View example an by clicking here: https://jsfiddle.net/mz103/59s42ys4/ or viewing it below:
$("div").on("click", function() {
$(this).text("Although my width changes, it is not aniamted.");
});
div {
display: inline-block;
background-color: red;
padding: 8px 16px;
transition: width 0.3s; // Notice, this doesn't transition the width upon change.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click me.</div>
How, when the text of an inline element changes, can we animate those changes?

Here an Update: https://jsfiddle.net/ky3c5Lec/3/
$("div").on("click", function() {
//get the current Dimensions, as Start-value for the animation
var $this = $(this),
sw = $this.width(),
sh = $this.height();
$this.text("New text");
var tw = $this.width(),
th = $this.height();
$this.css({
//since jQuery.animate() doesn't have sth. like Tween.from()
//we have to reset the styles to the initial values
width: sw, height: sh
}).animate({
//and then animate
width: tw, height: th
}, function(){
//and when the animation is done, we clean up after ourselves
$this.css({
width: "", height: ""
});
})
});

You could try a little bit of jQuery animation:
function changeText(el) {
el.animate(
{
opacity: 0
},
{
duration: 'slow',
complete: function () {
$(this).text('New Text');
$(this).animate({opacity: 1}, 'slow');
}
});
}
Here is a fiddle.

I suppose that you will need two elements to achieve this elegantly:
$(".inner").on("click", function() {
var $this = $(this);
var $par = $this.parent();
$par.css({
width: $par.width()
});
$this.text("New text");
$par.css({
width: $this.outerWidth()
});
});
.inner {
display: inline-block;
padding: 8px 16px;
white-space: nowrap;
}
.outer {
display: inline-block;
transition: width 300ms ease-in-out;
background-color: red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">Here's some text.</div>
</div>

Circular Images - Apply Tint on Hover

I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }

Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}

Resize an Image on click

So I'm trying to make a simple gallery of photos that enlarge when you click them and then return to their smaller size when you click them a second time. I have the enlarge part working but so far I have only been able to get the picture to scale back down by using ".mouseout" with JQuery, which is not what I want. Also I'd like the image to sit on top off all the other images/divs when it is enlarged, right now it gets covered by any other image to the left or right.
Here's my code, and a jsfiddle link at the bottom
HTML
<div id="Gpic1">
<img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>
CSS
#Gpic1 {
width: 280px;
height: 187px;
display: block;
background: black;
}
#table {
width: 280px;
height: 187px;
}
JQuery
$('#Gpic1').hover(function () {
$(this).find('img').fadeTo(500, 0.5);
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#table').click(function () {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").stop().animate({
width: 800,
height: 533
}, 200); //Bigger
}).mouseout(function () {
$("#table").stop().animate({
width: 280,
height: 187
}, 200); //Smaller
});
http://jsfiddle.net/kmx6C/
Thanks

You can add a class enlarged to the element you are enlarging, and then check whether the image is currently enlarged or not.
if($('#table').hasClass('enlarged')){
$('#table').removeClass('enlarged');
$("#table").stop().animate({width: 280, height: 187}, 200 );
}else{
$('#table').addClass('enlarged')
$("#table").stop().animate({width: 800, height: 533}, 200 );
}
Fiddle: http://jsfiddle.net/4LUYM/

You will need to keep track if the image is expanded or normal:
See it here: http://jsfiddle.net/kmx6C/4/
if ($(e.target).hasClass('expanded')) {
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
} else {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").addClass('expanded').stop().animate({
width: 800,
height: 533
}, 200);
}
If you're going to still use the mouseout event, then you'll want to make sure to remove the class there:
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
As for making is "sit" a top of other images, you'll want to make sure that the "z-index" and "position" is set accordingly.

How to make an image x% bigger in JavaScript (with jQuery)

I thought this ought to be a straightforward thing to do, but I don't see a clear way to do it.
I would like to make it so that when a user hovers the mouse over an image, the image becomes 10% bigger and then returns to its original size when the user moves the mouse away.
I think that I will want to use the jQuery hover function, but I don't know what functions to pass into hover.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);

jQuery lets you use += and %. So those two together will do what you want.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
DEMO: http://jsfiddle.net/rZaAE/

You could do it with CSS3 tranform property, for example
$('.resizableImage').hover(function(){
$(this).css("transform", "scale(1.1, 1.1)");
}, function(){
$(this).css("transform", "none");
});

Without CSS3 you could simply get original size using .width() and .height() methods, store it in data attribute(s) and resize. On mouseout just restore the original values.
var hoverRatio = 1.1;
$('.resizableImage').hover(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
$(this).css({
width: $(this).width() * hoverRatio,
height: $(this).height() * hoverRatio
});
}, function() {
$(this).css({
width: $(this).data('width'),
height: $(this).data('height')
});
});​
See the DEMO.

You should use stop on the animation also so it doesn't get interrupted when the user moves out before the animation has finsihed
html:
<img src="http://placehold.it/350x150" class="resizableImage" width="350" height="150" />​
js:
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
​
Here is a fiddle:
http://jsfiddle.net/tWdAK/1/

Couldn't you just do this with css:
CSS
.resizable_img {
position: relative; // needed for z-index to work
width: 100%;
height: auto; // will resize image proportionally
}
.resizable_img:hover {
width: 120%;
z-index: 1; // place image on top
}
.img_container {
width: 25%;
position: relative;
overflow: visible; // stops images being shifted
float:left;
}
HTML
<div class="contents">
<div class="img_container">
<img class="resizable_img" src="img.jpg">
</div>
</div>
Fiddle here

If you're not using inline styling, you can omit saving the old values in data and use style attr instead.
$('.element').hover(function() {
var el = $(this);
el.attr('style','width:'+el.width() * 1.1 + 'px;height:'+el.height() * 1.1 + 'px;');
}, function() {
$(this).removeAttr('style');
});​

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