sylvaincombes /
jquery-images-compare
| @@ 284-332 (lines=49) @@ | ||
| 281 | * @param duration in ms |
|
| 282 | * @param easing 'swing', 'linear' |
|
| 283 | */ |
|
| 284 | function setVisibleRatio(ratio, animate, duration, easing) { |
|
| 285 | if (typeof animate == 'undefined') { |
|
| 286 | animate = false; |
|
| 287 | } |
|
| 288 | ||
| 289 | var width = getRatioValue(ratio); |
|
| 290 | ||
| 291 | if (animate) { |
|
| 292 | var finalDuration = duration ? duration : options.animationDuration; |
|
| 293 | var finalEasing = easing ? easing : options.animationEasing; |
|
| 294 | ||
| 295 | launchAnimation(lastRatio, ratio, finalDuration, finalEasing); |
|
| 296 | ||
| 297 | // Let the world know something has changed |
|
| 298 | if (lastRatio != ratio) { |
|
| 299 | element.trigger({ |
|
| 300 | type: events.changed, |
|
| 301 | ratio: lastRatio, |
|
| 302 | value: width, |
|
| 303 | animate: animate |
|
| 304 | }); |
|
| 305 | } |
|
| 306 | ||
| 307 | return; |
|
| 308 | ||
| 309 | } else { |
|
| 310 | frontElement.stop().css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)'); |
|
| 311 | ||
| 312 | if (options.addSeparator) { |
|
| 313 | $(separator).stop().css('left', width + 'px'); |
|
| 314 | } |
|
| 315 | ||
| 316 | if (options.addDragHandle) { |
|
| 317 | dragHandle.css('left', width + 'px'); |
|
| 318 | } |
|
| 319 | } |
|
| 320 | ||
| 321 | // Let the world know something has changed |
|
| 322 | if (lastRatio != ratio) { |
|
| 323 | element.trigger({ |
|
| 324 | type: events.changed, |
|
| 325 | ratio: ratio, |
|
| 326 | value: width, |
|
| 327 | animate: animate |
|
| 328 | }); |
|
| 329 | } |
|
| 330 | ||
| 331 | lastRatio = ratio; |
|
| 332 | } |
|
| 333 | ||
| 334 | function setSize(width, height, maxWidth, maxHeight) { |
|
| 335 | if (typeof width != 'undefined') { |
|
| @@ 229-263 (lines=35) @@ | ||
| 226 | * @param duration value in ms |
|
| 227 | * @param easing linear or swing |
|
| 228 | */ |
|
| 229 | function launchAnimation(startValue, endValue, duration, easing) { |
|
| 230 | $(frontElement).attr('ratio', startValue).animate({ratio: startValue}, { |
|
| 231 | duration: 0 |
|
| 232 | }); |
|
| 233 | ||
| 234 | $(frontElement).stop().attr('ratio', startValue).animate({ratio: endValue}, { |
|
| 235 | duration: duration, |
|
| 236 | easing: easing, |
|
| 237 | step: function (now) { |
|
| 238 | var width = getRatioValue(now); |
|
| 239 | lastRatio = now; |
|
| 240 | frontElement.attr('ratio', now).css('clip', 'rect(0, ' + width + 'px, ' + size.height + 'px, 0)'); |
|
| 241 | ||
| 242 | if (options.addSeparator) { |
|
| 243 | separator.css('left', width + 'px'); |
|
| 244 | } |
|
| 245 | ||
| 246 | if (options.addDragHandle) { |
|
| 247 | dragHandle.css('left', width + 'px'); |
|
| 248 | } |
|
| 249 | }, |
|
| 250 | done: function (animation, jumpedToEnd) { |
|
| 251 | var ratio = $(frontElement).attr('ratio'); |
|
| 252 | // Let the world know something has changed |
|
| 253 | element.trigger({ |
|
| 254 | type: events.changed, |
|
| 255 | ratio: ratio, |
|
| 256 | value: getRatioValue(ratio), |
|
| 257 | animate: true, |
|
| 258 | animation : animation, |
|
| 259 | jumpedToEnd: jumpedToEnd |
|
| 260 | }); |
|
| 261 | } |
|
| 262 | }); |
|
| 263 | } |
|
| 264 | ||
| 265 | /** |
|
| 266 | * Get value to reach, based on a ratio |
|
