Develop Reference

Add smooth transition to button which is becoming bigger after click event

With a javascript click-event I am adding extra html-text (to be specific: an "X"-icon" within a span) to a button. I am doing this with switching the property on the span-icon-class from display: none to display: block.
The button therefore becomes bigger because of the added icon after the click event instantly.
What CSS/js do I need to add, to make this transition smooth, so that the button grows slowly bigger instead of instantly?
Thanks a lot and sorry for maybe complicated questioning.

Maybe look at https://www.w3schools.com/css/css3_transitions.asp.
If you have a fixed initial button width, it should be something like this :
JS :
$('.mybutton').on('click', function(){ $(this).addClass('clicked') };
CSS :
.mybutton{
width : 90px;
transition : width 0.5s ease;
}
.mybutton.clicked{
width : 120px;
}

Yes, you can add CSS to do such a transition. However, you can't use from display: none -> block for a CSS transition. If I don't remember it incorrectly it's because it transitions over time, and display: none/block is a binary system, meaning it can only be shown or not shown, there is no in between. I believe visibility can be used instead because it supports this in-between state of both existing and not existing so to speak.
See this question: Transitions on the display: property
Also, google "css transition display none block" and you'll get a bunch of helpful links.

Okay, I resolved it with a scale-property. I transition the scale of the x-icon, which also slowly enlarges the button.

Jquery hover for the lowest element layer

For example i got this html:
<div id="div1">
<div id="div2"></div>
</div>
div2 is display:none.
So is there a jquery method, to trigger a hover function on div1 that diplays div2.
like this:
$('#div1').hover(function(){
$('#div2').stop().fadeIn();
}, function(){
$('#div2').stop().fadeOut();
});
i've got a bigger code but its too large to post. Every function i tried works not so fine. I want to trigger the hover ONLY on the lowest layer element div1. But mostly if the fadeIn() is triggered and the cursor moves over it the hover effect on div1 ends.
Are there hover function that includes ALL child elements?

If I understand you want to fade in all children when the parent is hovered?
Seeing as you have CSS tagged in your question, I'll give a CSS answer:
Demo Fiddle
#div1 *{
opacity:0;
transition:opacity 200ms ease-in;
}
#div1:hover *{
opacity:1;
}

How about using Nth Child selector of Jquery. I couldn't paste an example here because I am currently outside.
But this should work if you read it.
http://api.jquery.com/nth-child-selector/

Trigger event during a css transition

I want to add a class / set a custom z-index during a css transition.
In my researches, I didn't find anything except webkitTransitionEnd which don't do the work.
I have an animated div on hover but if I hover multiple div, he go below the other, that's why I want to set a custom class during the transition (not during the hover).
Here is a jsfiddle (simplified for webkit)
and the problem in image
Edit: The real problem is when I hover a div, unhover, rehover, hover an other, so it's hard to do a simple timeout...

The problem is that when you "un-hover", the switch to the original z-index is happening instantaneously. So the rotating panel is no longer painted in front of its neighbours.
The easiest way to solve that is to make sure that the z-index value is being transitioned as well. It wasn't transitioning in your code as you had it, because z-index was being set on the parent div.panel but your transition functions were only applied to the child div.front and div.back.
This seems to work even when you switch between panels mid-transition:
http://jsfiddle.net/8Fvdb/1/
.panel{
transition: z-index 1s;
}
(Note that I've commented-out the z-index values on the individual panel faces for simplicity; it doesn't seem to change anything either way on Chrome, haven't tested elsewhere.)

I would give for granted that the CSS transition will succeed, and just remove the class after a timeout equal to the transition time:
with a transition of 2s:
.panel {
transition: opacity 2s;
}
set this timeout to remove the class after 2000 ms:
setTimeout(function(){
//you remove the class after the transition time
$('.panel').removeClass("transition-running");
},2000)
$('.panel')
//you add the class before changing the style
.addClass("transition-running")
.css("opacity","0.1");

Animate opacity on image load

I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/
It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.
Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.
Here is the jQuery I'm using right now but it is not correct:
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.
What am I doing wrong or what should I do differently?
Thanks everyone
EDIT:
I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'
I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious

Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?
If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.
If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788

Try animate
$('#image').animate({ opacity: '1'}, 600);

You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">

Dynamically repeat/tile div and child(s)?

I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.

I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}​
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);