Div inhoud veranderen + fade?
- FadeIn
- AJAX
$('#melding').fadeOut(1000); //uitfaden
$('#melding').html(data); //data uit de var data in melding zetten
$('#melding').delay(1500); //de div weer laten zien
Kan denk ik trouwens ook wel met callback, maar dit is lekker makkelijk:)
Jasper van Oeffel op 13/11/2010 19:40:16:
jquery:
$('#melding').fadeOut(1000); //uitfaden
$('#melding').html(data); //data uit de var data in melding zetten
$('#melding').delay(1500); //de div weer laten zien
Kan denk ik trouwens ook wel met callback, maar dit is lekker makkelijk:)
$('#melding').fadeOut(1000); //uitfaden
$('#melding').html(data); //data uit de var data in melding zetten
$('#melding').delay(1500); //de div weer laten zien
Kan denk ik trouwens ook wel met callback, maar dit is lekker makkelijk:)
Oke, ik heb mijn voorbeeldje, ik ga aan de slag! :)
Toevoeging op 13/11/2010 20:00:57:
Hmm... Gaat niet zoals ik het helemaal wil:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var newdata = 'De data is verandert!';
function newdatashow() {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1500);
}
function newdatashow() {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1500);
}
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="content.js"></script>
<a href="javascript:;" onclick="newdatashow();">Change</a>
<div id="melding">
Verander de data!
</div>
<script type="text/javascript" src="content.js"></script>
<a href="javascript:;" onclick="newdatashow();">Change</a>
<div id="melding">
Verander de data!
</div>
Nu als ik op change klik, verandert eerst de data, dan fade ie out, dan fade ie weer in...?
Gewijzigd op 13/11/2010 19:52:14 door Dalando De Zuil
Code (php)
1
$('a').click(newdatashow());
En dat het niet werkt, komt denk ik omdat je geen callbacks gebruikt, maar ik ben niet zo bekent met jquery/js.
Theodoor van Donge op 13/11/2010 20:13:24:
Trouwens zou ik de onclick in de html vervangen door de jquery variant:
En dat het niet werkt, komt denk ik omdat je geen callbacks gebruikt, maar ik ben niet zo bekent met jquery/js.
Code (php)
1
$('a').click(newdatashow());
En dat het niet werkt, komt denk ik omdat je geen callbacks gebruikt, maar ik ben niet zo bekent met jquery/js.
Ik ben denk ik nog minder bekent met jquery, vandaar dat ik ben begonnen met het leren ervan :) Ik kan al een beetje overweg met scriptalous, maar dat terzijde. En hoe/wat/waar callbacks?
Nu een klein code voorbeeld:
Code (php)
1
2
3
2
3
$('#melding').fadeOut(1000, function () {
$('#melding').html(data)
)}
$('#melding').html(data)
)}
Hier is de function (){} de callback, maar als je er meer over wilt weten, ga dan gewoon even op de jquery site kijken, of naar de link hier boven.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
var newdata = 'De data is verandert!';
$('a').click(function () {
$('#melding').fadeOut(1000, function () {
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
})
});
$('a').click(function () {
$('#melding').fadeOut(1000, function () {
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
})
});
Nou doet ie al helemaal niks meer, ik snap er niks meer van!
Toevoeging op 13/11/2010 21:28:46:
Heey, het is me gelukt!
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
var data = 'De data is verandert!';
function newdata() {
$('#melding').fadeOut(1000, function () {
$('#melding').html(data);
$('#melding').fadeIn(1500);
})
}
function newdata() {
$('#melding').fadeOut(1000, function () {
$('#melding').html(data);
$('#melding').fadeIn(1500);
})
}
Joepie! :)
Code (php)
1
2
3
4
5
2
3
4
5
$('a').click(function () {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
al zou ik je link dan een id/class meegeven en dan kan je $('a') veranderen door $('#linkid')/$('.linkclassname'), dan worden niet alle hrefs gebruikt om die functie in zijn gang te zetten
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function getdata(file){
$.get(file, function(data) {
$('#content').fadeOut(800, function (data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
$.get(file, function(data) {
$('#content').fadeOut(800, function (data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
Code (php)
1
2
3
4
5
2
3
4
5
<a href="javascript:;" onclick="getdata('new.html');">Change</a>
<div id="content">
Verander de data!
</div>
<div id="content">
Verander de data!
</div>
Maar dit werkt niet, de data blijft: 'verander de data!'??
Met dit krijg ik fade out, en dan niks!
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function getdata(file){
$('#content').fadeOut(800, function () {
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
$('#content').fadeOut(800, function () {
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
Gewijzigd op 14/11/2010 22:20:51 door Dalando De Zuil
Ziet er in mijn ogen goed uit zo.
-edit-
en wat nou als je het zo probeert:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function getdata(){
$('#content').fadeOut(800, function () {
$.get('completerurl.hier', function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
$('#content').fadeOut(800, function () {
$.get('completerurl.hier', function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
Gewijzigd op 16/11/2010 11:48:31 door jasper hoi
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$('a.contact').click(function () {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
$('a.home').click(function () {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
$('a.home').click(function () {
$('#melding').fadeOut(1000);
$('#melding').html(newdata);
$('#melding').fadeIn(1000);
});
Maar als ik nu
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function getdata(file){
$('#content').fadeOut(800, function () {
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
$('#content').fadeOut(800, function () {
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn(1500);
})
})
}
en
<a href="javascript:;" onclick="getdata('contact.php');">Contact</a>
<a href="javascript:;" onclick="getdata('home.php');">Home</a>
Bespaart toch code
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$('.getdata').click(function () {
var str = $(this).attr('href');
$('#melding').fadeOut(1000);
$('#melding').html(str.substr(1));
$('#melding').fadeIn(1000);
return false;
});
var str = $(this).attr('href');
$('#melding').fadeOut(1000);
$('#melding').html(str.substr(1));
$('#melding').fadeIn(1000);
return false;
});
<a href="#contact.php" class="getdata">Contact</a>
Zoiets kan ook :) Evenveel code en dan hoef je niet onclick te doen.