The point wasn't really about animation or if others are doing it this way, it was about looking at targeting an element in a more ideal way.
So if you are trying to swap between two images you could do something like this. Add a Data- of the swap to image and then another Data- of the original image to return to on next click.
HTML
< img src="path/image1.png" data-iswap="image2.jpg" data-oswap="image1.png" />
< img src="path/image3.gif" data-iswap="image4.jpg" data-oswap="image3.gif" />
JS
$(function(){
$("[data-iswap]").on("click", function(){
var $this = $(this);
var $iSRC = $this.attr("src");
var $newSRC = $this.data("iswap");
var $oldSRC = $this.data("oswap");
var $newImgSrc = $iSRC.replace(/\w+\.(?![com|net|org|biz|info|live|me])\w+/g, $newSRC);
var $oldImgSrc = $iSRC.replace(/\w+\.(?![com|net|org|biz|info|live|me])\w+/g, $oldSRC);
if ($newImgSrc.indexOf($iSRC) === -1){
$this.attr("src", $newImgSrc);
}else{
$this.attr("src", $oldImgSrc);
}
});
});
This will swap between 2 images each time the image is clicked and it shouldn't care about the SRC's path. Obviously all the images should exist in the same path because of that. It singles out the object being clicked, gets it's SRC and the 2 Data- attribute values then it replaces the end of the SRC and based on which is in the SRC it applies the other Data- attribute.
I had to rewrite this a couple times because I kept improving the JS code and it no longer is limited to a single files type extension as well as it should accounts for absolute URLs too.
The overall point was to show a better way of targeting something that's not based on something that is as volatile as something like an IMG SRC. Because who knows you could have some other JS code that on page load changes the SRC and now you have another script expecting one thing and now getting another and your all messed up.
And even so with all this you don't have to target it based on a specific SRC url when you can target it based on the SRC containing a specific word. i.e.
$("img[src*='image1']").on("click", function(){...
https://api.jquery.com/attribute-contains-selector/
Now to use the JS code, you'll need to be aware of URLs your using and update the JS accordingly so that you only end up with the targeted image.ext wording.
So if you have an image like
< img src="http://www.something.com/some/pic.png">
You need to update this part of the JS to also omit the domain like I did with the word "some" because it's proceeded by the ".".
/\w+\.(?![com|net|org|biz|info|live|me|some])\w+/g
I'm sure there's a better regex that can be used to find just the image.ext, but this has taken a good bit of time to work this out for me. Not really something I do well with :)
And I just want to restate that I too would like the app to resemble exported pathing as well as being able to dictate the path I want.
The exported path for html/css/js and images that I need are nothing like what the app does. So I have to use Notepad++ and load up all the html/css files and do a search/replace for all the paths. Which is quick anyways.
Saj