I'm trying to loop through sub and sub-divs in the example below :
I want to display the widget-text classes one by one in each widget with the duration which is specified in the data property (data-duration).
Example: t = 0
- => The first widget-text class in the widget-1 class will appear for the 2 seconds then fadeOut and shows the next widget-text in the same .widget-1 class
- => The first widget-text class in the widget-2 class will appear for the 5 seconds then fadeOut and shows the next widget-text in the same .widget-2 class
I've tried that but it doesn't work when the duration is the not the same between the widget-text, plus I'm not quite sure if it's the right logic (in this example I get the duration dynamically but I could pass it in the data property like in this jsfiddle example)
widgetsThatHasWidgetText.each ->
widget_view = $(this)
currentInterval = 1000
slideShowDivs = $(this).find('.widget-text')
$(this).find('.widget-text').each ->
pageNumber = $(this).data('page-number')
widgetId = $(this).data('widget-id')
currentWidget = $(widgets).filter (i, n) ->
n.id == parseInt(widgetId)
currentInterval = currentWidget[0].get_real_duration_for_widgets_text[pageNumber.toString()]
@widgetTextInterval = setInterval =>
self.cycleDivs(widget_view)
, currentInterval
self.widgetTextIntervals.push(@widgetTextInterval)
cycleDivs:(widgetView) ->
console.log 'CYCLE EXCETUED'
$active = $(widgetView).find('.active')
$next = if $active.next().length > 0 then $active.next() else $(widgetView).find('.widget-text:first')
$next.css 'z-index', 2
#move the next image up the pile
$active.fadeOut 200, ->
#fade out the top image
$active.css('z-index', 1).show().removeClass 'active'
#reset the z-index and unhide the image
$next.css('z-index', 3).addClass 'active'
#make the next image the top one
return
return
Can someone help to figure out how can I do that ?
Thank you,
Aucun commentaire:
Enregistrer un commentaire