Trouble understanding $()
- $(document).ready(function() {
- $('#bluebeans').click(function(){
- $('.redbeanpic').fadeOut(200,function(){
- // only then fade has finised, set index to 3
- $('.bluebeanpic').css('z-index', '3');
- $('.redbeanpic').css('z-index', '2').show();
- });
- });
- $('#redbeans').click(function(){
- $('.bluebeanpic').fadeOut(200,function(){
- // only then fade has finised, set index to 3
- $('.redbeanpic').css('z-index', '3');
- $('.bluebeanpic').css('z-index', '2').show();
- });
- });
- });
So far so good, if I click on item with id redbeans, then bluebeanspic fades out and redbeanspic becomes visible from below in the z index stack. However what if I had three pictures instead of two?
I tried this (doesn't work):
- $(document).ready(function() {
- var $top = '.redbeanpic'
- $('#bluebeans').click(function(){
- $top.fadeOut(200,function(){
- // only then fade has finised, set index to 3
- $('.bluebeanpic').css('z-index', '3');
- $top.css('z-index', '2').show();
- var $top = '.bluebeanpic';
- });
- });
- $('#redbeans').click(function(){
- $top.fadeOut(200,function(){
- // only then fade has finised, set index to 3
- $('.redbeanpic').css('z-index', '3');
- $top.css('z-index', '2').show();
- var $top = '.redbeanpic';
- });
- });
- $('#greenbeans').click(function(){
- $top.fadeOut(200,function(){
- // only then fade has finised, set index to 3
- $('.greenbeanpic').css('z-index', '3');
- $top.css('z-index', '2').show();
- var $top = '.greenbeanpic';
- });
- });
- });