0

I have a website, and a slideshow of pictures on the main page. Before a photo is removed, I write the next photo behind it and then remove it. I wanted to know how I can add a fading effect before the photo is removed. my website is: guyzyl.org, so you can check out what im talking about. Also I dont know how to use Jquery, so please dont offer that solution. Thanks for any help. Guy Z.

guyzyl
  • 387
  • 5
  • 18
  • 1
    i think you shouldn't give up on jquery without trying it. see the example on this site, it is easy to implement and supported across browsers (as Derek's doesn't cover IE's short comings, shame on them not him) http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/ – peroija May 20 '12 at 20:08

1 Answers1

4
.photo{
    -webkit-transition: opacity .5s ease-in-out;  /*Webkit*/
    -moz-transition: opacity .5s ease-in-out;  /*Firefox*/
    -o-transition: opacity .5s ease-in-out;  /*Opera*/
    transition: opacity .5s ease-in-out;  /*CSS3 Standard*/
    opacity: 1;
}
.photo.fade{
    opacity: 0;
}

document.querySelector(".photo").classList.add("fade");

See Demo: http://jsfiddle.net/DerekL/jzLZZ/

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • but I want it to fade before removing it, not when it is written, so can I edit the photos style before removing it using javascript? – guyzyl May 20 '12 at 19:55
  • @guyzyl - See demo if it is what you expected. – Derek 朕會功夫 May 20 '12 at 19:58
  • did you test this in IE? doesn't seem to work for either 7, 8, or 9 – peroija May 20 '12 at 19:59
  • can you help me implement this in my website (guyzyl.org)? – guyzyl May 20 '12 at 20:03
  • @guyzyl - I recommend you use jQuery for that purpose, since it is easy to use, and most important -- cross browser capable. – Derek 朕會功夫 May 20 '12 at 20:11
  • @Derek - I wrote an HTML with your code, and it didn't work. - http://dl.dropbox.com/u/25407332/testFade.html - do you know why is that? – guyzyl May 21 '12 at 18:18
  • @guyzyl - You put some extra characters in Line 11: `;​` (Maybe it's a problem from changing `ANSI` to `UTF-8`, just delete it) – Derek 朕會功夫 May 23 '12 at 02:51
  • @guyzyl See See http://derek1906.site50.net/experiment/testFade.html (fixed for you) – Derek 朕會功夫 May 23 '12 at 02:57
  • @Derek - new problem. tried to implament your solution to my website, and it didnt work. - guyzyl.org/files/slideshow.js - check the bWrite() function, and thanks again for all the help! – guyzyl May 23 '12 at 18:15
  • @guyzyl - I have taken a look in your script. The problem is here: `setTimeout("bWrite", 2000);`; it should be `setTimeout(bWrite, 2000);`.([Take a look](http://jsfiddle.net/DerekL/Jaeej)) It also seems that you are trying to put the CSS `transition:` into the `style` part every time, but what really is is that you just need to set it once. And instead of `.style = style + fade;`, you can do `.style += fade;`. Good luck! – Derek 朕會功夫 May 23 '12 at 23:09
  • @Derek - sorry to bother you again, but I rewrote the slideshow code again to make it more understandable, and more efficient, but a new problem arose. - https://www.dropbox.com/s/ntwsegtyreli2lc/slideshow.js -it works fine, but when I try to zero the opacity to make the fade effect (using document.getElementById('photo').style.opacity = '0';), it screws up the slideshow. i added the fade thing to the css, and you can also see all of the code on my website - guyzyl.org - – guyzyl May 24 '12 at 11:14
  • @guyzyl - If I didn't get it wrong, your code is only for doing the slideshow thing, right? And it is over-complicated IMO. Try this: http://jsfiddle.net/DerekL/HxZ3Y/ , I create the slideshow with only 15 lines, and no problems appeared so far. ;) – Derek 朕會功夫 May 25 '12 at 02:05
  • @Derek - thanks for the example you wrote, but since Im new to javascript, and Im not really that good, I cant understand what the code does. additionaly, my code is complicated because i dont want to see a white space when the photo changes - so can you help me fix the code I have? – guyzyl May 25 '12 at 07:04
  • @guyzyl - Here, no white space showing, 13 lines only (:D), http://jsfiddle.net/DerekL/HxZ3Y/3/ (*explanation included*) Also you might want to take a look at the CSS code too. – Derek 朕會功夫 May 25 '12 at 22:38
  • @Derek - thank you for the slideshow you wrote, but I would like to keep my code as it is (and also i couldnt implement you slideshow). can you please, just tell me how i can change the opacity to 0 in my gallery, so there is the fade effect? – guyzyl May 26 '12 at 08:40